JS: Find Window Size

By Xah Lee. Date: . Last updated: .

How to find the viewport size?

document.documentElement.clientWidth and document.documentElement.clientHeight are viewport size.

// get viewport size
var x = document.documentElement.clientWidth;
var y = document.documentElement.clientHeight;

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.

How to find window size?

window.innerWidth and window.innerHeight.

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

How to find screen size?

Values of screen.width and screen.height.

How to find scroll amount?

window.pageXOffset and window.pageYOffset.

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

How to find HTML document's rendered size?

document.documentElement.offsetWidth and document.documentElement.offsetHeight are the html element's size.

Like what you read? Buy JavaScript in Depth