How to Get Viewport Dimension in JavaScript

1. Get Viewport Width Using window.innerWidth in JavaScript
2. Get Viewport Width Using document.documentElement.clientWidth in JavaScript

A browser viewport is the area of ​​the window in which web content can be viewed. This article will learn how to get Viewport Dimension in JavaScript.

Javascript provides two ways to find out the viewport of the device.

• Using window.innerWidth and window.innerHeight
• Using document.documentElement.clientWidth and .clientHeight

Get Viewport Width Using window.innerWidth in JavaScript

The window’s read-only innerWidth property returns the inner width of the window in pixels. This includes the width of the vertical scrollbar.

The inner height of the window can be obtained from the innerHeight property.

Syntax:

let intViewportWidth = window.innerWidth;

An integer value indicates the width of the window’s layout viewport in pixels. This property has no default value and is read-only.

To change the window’s width, use one of the window’s methods to change the size of the windows, e.g., resizeBy() or resizeTo().

More information on window.innerWidth.

function resizeEventListener() {
  console.log('innerHeight', window.innerHeight);
  console.log('innerWidth', window.innerWidth);
}

window.addEventListener('resize', resizeEventListener);

We calculate the internal height and width of the window before and after resizing the browser window.

To get the width of the window minus the scrollbar and borders, use the clientWidth property instead. Results may vary by the window.

Output:

// Before resize
"innerHeight", 219
"innerWidth", 1326
// After resize
"innerHeight", 166
"innerWidth", 974

Get Viewport Width Using document.documentElement.clientWidth in JavaScript

The property element.Clientwidth is zero for items inline and elements without CSS; otherwise, it is the internal width of an element in pixels.

Includes padding but excludes borders, margins, and vertical scrollbars.

When clientWidth is used on the root element or if the document is in quirks mode, the viewport’s width is returned, excluding scrollbars.

Syntax:

var intElemClientWidth = element.clientWidth;

The intElemClientWidth is an integer value representing the clientWidth of element in pixels. The clientWidth property is read-only.

More information on element.clientWidth.

function resizeEventListener() {
  console.log('clientWidth', document.documentElement.clientWidth);
  console.log('clientHeight', document.documentElement.clientHeight);
}
window.addEventListener('resize', resizeEventListener);

We calculate the client’s internal height and width.

Output:

// Before resize
"clientWidth", 1326
"clientHeight", 219
// After resize
"clientWidth", 974
"clientHeight", 166

To view the results, click here.