JavaScript provides a native API to get the width and height of a viewport. But it’s important to understand the difference between what sizes you are getting as it may cause you some trouble.

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.

Viewport size

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

The 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

The 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

The 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

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

Device size

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.

Document size

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

1. clientWidth and clientSize properties

While the 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

The clientHeight property returns the inner height of an element. Just like with the clientWidth, 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

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

The 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

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

The 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

The 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

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

Final thoughts

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.