There may be times where your JS application needs to know what the size of the screen is to be able to do certain actions.
You might wish to do something involving the user’s device resolution. In this case, you should use the built-in
screen.height properties. These give you the size of the screen you’re dealing with. This is not the area you have to work with on the page; these values represent the entirety of the screen i.e. the user’s display resolution.
There might be an interesting application for dealing with the browser’s current size. If you need to access these dimensions, use the
screen.availHeight properties to do so. Remember, these are the dimensions of the entire browser window, from the top of the browser window down to where the browser meets a taskbar or the edge of your desktop, depending on your setup.
An interesting note:
screen.availHeight can also be used to figure out how tall a taskbar is on a computer. If your browser resolution is say
1366 x 768, and
screen.availHeight reports 728 pixels, then your taskbar is 40 pixels high. You can also calculate taskbar height by subtracting
var taskbarHeight = parseInt(screen.height,10) - parseInt(screen.availHeight,10) + " pixels"; /* For a user that has a screen resolution of 1366 x 768 pixels, their taskbar is likely 40 pixels if using Windows 10 with no added accessibility features. */
These properties are interesting and could be used to create some nifty effects. You can use
window.innerWidth to get the size of the window for the web page as the user sees it. These values are not static and will change depending upon what is happening with the browser itself. In other words, if the browser itself is small, these values will be smaller, and if the browser is maximized, they’ll be larger.
If, for example, you are working in Google Chrome and you open the console (must be docked to a side of the window),
window.innerHeight will change to reflect the height of the console because part of the window will be blocked. You can test this out by calling
window.innerHeight, take note of the value, then increase the size of the console, and call
These properties will also change if your browser is maximized or resized in any way. At a browser’s maximum size, the property
window.innerWidth is the same as both
screen.availWidth (unless there is a taskbar on the side, in which case
screen.availWidth will not be equal).
window.innerHeight is equal to the amount of area in the window of the page itself (the area of the web page).
If you need to see how tall or wide your web page actually is, there are properties to grab these dimensions:
document.body.offsetHeight. These properties represent the size of the content in the body of the page itself. A page with no content has a
document.body.offsetHeight of close to the same value as
window.innerHeight depending on what margins/padding are set on the body of the document. If margins and padding are set to
0 on the html root element and the body of the document, then
window.innerHeight will be equal with no content.
These properties could be used to interact with your page/application depending on what you want to do.
Which property to use is based solely upon what you wish to do. Read what each of them do, and decide for yourself which properties you need to use for your project.