Good day, friends!
To determine the orientation of the browser window (landscape or portrait), you can compare its width and height.
However, it is easy to get confused in all kinds of available sizes: there are screen sizes, windows, web pages, etc.
What do these sizes mean and, most importantly, how to get them? That’s what I’m going to tell you about.
1.1. Screen Size
Screen size is the width and height of the entire screen: monitor or mobile display.
You can obtain information about the screen size using the CDMY0CDMY property of the CDMY1CDMY object:
const screenWidth=window.screen.width const screenHeight=window.screen.height
1.2. Available Screen Size
The available screen size is the width and height of the active screen without the operating system toolbar.
To get an affordable screen size, we again turn to CDMY2CDMY:
const availableScreenWidth=window.screen.availWidth const availableScreenHeight=window.screen.availHeight
2.1. External window size (or external window size)
The size of the external window is the width and height of the current browser window, including the address bar, tab bar and other browser panels.
You can obtain information about the size of the external window using the CDMY3CDMY and CDMY4CDMY properties of the CDMY5CDMY object:
const windowOuterWidth=window.outerWidth const windowOuterHeight=window.outerHeight
2.2. Inside window size (or inside window size)
The internal size of the window is the width and height of the viewport (viewport).
The CDMY6CDMY object provides the properties CDMY7CDMY and CDMY8CDMY:
const windowInnerWidth=window.innerWidth const windowInnerHeight=window.innerHeight
If we want to get the internal size of the window without scrollbars, then do the following:
const windowInnerWidth=document.documentElement.clientWidth const windowInnerHeight=document.documentElement.clientHeight
3. Web Page Size
Web page size is the width and height of the displayed content (rendered content).
To get the size of a webpage, use the following (includes inner margins of the page, but does not include borders, outer margins, and scrollbars):
const pageWidth=document.documentElement.scrollWidth const pageHeight=document.documentElement.scrollHeight
If CDMY9CDMY is larger than the inside height of the window, then there is a vertical scroll bar.
Hopefully now you understand how to get different sizes.
Screen size is the size of the monitor (or display), and the available screen size is the screen size without the OS toolbars.
The external window size is the size of the active browser window (including the search bar, tab bar, open side panels, etc.), and the internal window size is the size of the viewport.
Finally, the web page size is the size of the content.
Thank you for your attention, friends !.