JavaScript: Find Window Size

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.

const x = document.documentElement.clientWidth;
const y = 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.

const x = window.innerWidth;
const y = window.innerHeight;

Find Display Resolution

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

const x = screen.width;
const y = screen.height;

Find scroll amount

const x = window.pageXOffset;
const y = window.pageYOffset;

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

Find HTML document's rendered size

HTML element's size.

const x = document.documentElement.offsetWidth;
const y = document.documentElement.offsetHeight;
βˆ‘ JS in Depth
XAH Β BUY NOW

JS in Depth

JS Obj Ref

DOM


DOM

Overview

Basic Examples

HTML Input

Web Scripting Examples

Web Scripting Misc

jQuery

node.js