When making calculations you have to distinguish between viewport, device, and document. Because at times the values of all three may be the same. However they may sound and look as if they are the same, but really these are three different concepts.
In web development terms the viewport is treated the same as the browser window, including the rendered scrollbar if any.
MDN distinct two types of viewports:
- Layout viewport - the area which is available to be seen;
- Visual viewport - the portion of the viewport that is currently visible (e.g. zoomed area on a mobile device).
When we’re talking about the viewport for the most part we’re talking about the Layout viewport. There are 2 ways to get the width and height of the viewport (Layout viewport):
1. innerWidth and innerHeight properties
innerWidth property returns the interior width of the window in pixels (including the width of the scroll bar, if one is present).
const viewportWidth = window.innerWidth
innerHeight property returns the interior height of the window in pixels (including the height of the scroll bar, if one is present).
const viewportHeight = window.innerHeight
Both properties return the integer value and are read-only.
Browser Support: innerWidth and innerHeight supported by all browsers.
2. outerWidth and outerHeight properties
outerWidth read-only property returns the width of the outside of the browser window. It represents the width of the whole browser window including sidebar (if expanded), window chrome and window resizing borders/handles.
const browserWidth = window.outerWidth
outerHeight read-only property returns the height in pixels of the whole browser window, including any sidebar, window chrome, and window-resizing borders/handles.
const browserHeight = window.outerHeight
Both properties return the integer value and are read-only.
Browser Support: outerWidth and outerHeight supported by all browsers.
The device size is often referred to as a screen or display size. This is the size of an actual area of the device where users see the content. Unlike viewport or document size the values of the screen (display) remain unaltered.
To get the size of the screen the
window.screen property can be used. It is a part of the Screen API. The
screen property returns an object that contains data about the current screen.
Some of the properties of the
screen object can be utilized to get the size of the screen.
screen.width property returns a screen width in pixels. The returned value is an integer and read-only.
const screenWidth = window.screen.width
screen.height property returns a screen height in pixels. The returned value is an integer and read-only.
const screenHeight = window.screen.height
Browser support: Screen API supported in all browsers.
The following ways will get the size of the document. Now the difference from the viewport is that the document can be larger than the viewport itself. Also, other things need to be considered. But let’s move step by step.
To get the size of the document you need to get the
html element that represents the document. The
document.documentElement property returns the root element of the current document, that is
1. clientWidth and clientSize properties
clientWidth property returns the inner width of an element in pixels. Initially, it includes paddings but excludes borders, margins, and scrollbars. But for
html element it’s a special case and the viewport width is returned (in pixels), excluding scrollbar width.
const documentWidth = document.documentElement.clientWidth
clientHeight property returns the inner height of an element. Just like with the
clientHeight is a special case when used on the
html element. And it returns the viewport height (in pixels), excluding scrollbar height.
const documentHeight = document.documentElement.clientHeight
When using these properties the scrollbar width and height are excluded - this is another thing to consider I mentioned before.
Note: even if the
html element has the CSS width or height rules applied, the clientWidth and clientHeight properties will always return viewport width and height (without scrollbars).
Browser Support: clientWidth and clientHeight supported by all browsers.
2. offsetWidth and offsetHeight properties
HTMLElement.offsetWidth property can be used on an
html element to determine the width of the document. Note: that the document width can be larger than the viewport width.
HTMLElement.offsetWidth read-only property returns the integer value of the width of an element.
offsetWidth includes any borders, padding, and vertical scrollbars (if rendered).
const documentWidth = document.documentElement.offsetWidth
HTMLElement.offsetHeight property can be used on an
html element to determine the height of the document. Note: that the document height can be larger than the viewport height.
HTMLElement.offsetHeight read-only property returns the integer value of the height of an element.
offsetHeight includes any borders, padding, and horizontal scrollbars (if rendered).
const documentHeight = document.documentElement.offsetHeight
Browser Support: offsetWidth and offsetHeight supported by all browsers.
3. scrollWidth and scrollHeight properties
scrollWidth property returns the width of an element, including the part that is not visible on the screen due to overflow. This is a read-only integer value that includes the element’s padding, but not its border, margin, or vertical scrollbar (if present).
const documentWidth = document.documentElement.scrollWidth
scrollHeight property returns the height of an element, including the part that is not visible on the screen due to overflow. This is a read-only integer value that includes the element’s padding, but not its border, margin, or horizontal scrollbar (if present).
const documentHeight = document.documentElement.scrollHeight
Browser Support: scrollWidth and scrollHeight supported by all browsers.
To help you understand and remember the difference think of it this way, you have a laptop (device) on which you open the browser (viewport) to view the web page (document).
Device size is always fixed, while viewport and document can change in size.