JS DOM: Get window/viewport width height

By Xah Lee. Date: . Last updated: .

Find Viewport Size

View port is the area for displaying the HTML page. The result does not include scrollbar or toolbar nor status bar. Values changes when user zooms.

let xwidth = document.documentElement.clientWidth;
let xheight = document.documentElement.clientHeight;

Find window size

Window size here includes the scroll bars, but does not include the URL field, tool bar, status bar, etc. Note: when user zooms in, these values decrease. Similarly when zoom out.

let xwidth = window.innerWidth;
let xheight = window.innerHeight;

Find Display Resolution

This should be your display's resolution, unless you have operating system settings that make it 150% or other.

let xwidth = screen.width;
let xheight = screen.height;

Find scroll amount

let xwidth = window.pageXOffset;
let xheight = window.pageYOffset;

When no scroll, the value of window.pageYOffset is 0.

Find HTML document's rendered size

HTML element's size.

let xwidth = document.documentElement.offsetWidth;
let xheight = document.documentElement.offsetHeight;