ITKarma picture

Good day, friends!

I present to you the translation of a short note "How to Get the Screen, Window, and Web Page Sizes in JavaScript" by Dmitri Pavlutin.

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. Screen


1.1. Screen Size

Screen size is the width and height of the entire screen: monitor or mobile display.

ITKarma picture

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.

ITKarma picture

To get an affordable screen size, we again turn to CDMY2CDMY:

const availableScreenWidth=window.screen.availWidth const availableScreenHeight=window.screen.availHeight 

2. Window


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.

ITKarma picture

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).

ITKarma picture

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).

ITKarma picture

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.

4. Conclusion


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 !.

Source