JS: Find Window Size

By Xah Lee. Date: . Last updated: .

Find the viewport size

document.documentElement.clientWidth

// get viewport size
const x = document. documentElement.clientWidth;
const 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.

Find window size

window.innerWidth and height.

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.

Find screen size

screen.width and height.

Find scroll amount

window.pageXOffset and pageYOffset

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

Find HTML document's rendered size

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

Size of Element/Viewport/Window

  1. CSS: Fixed Aspect Ratio
  2. JS: Find element Size
  3. JS: Find Window Size

DOM How-To


Web Scripting Overview


HTML Input


Web Scripting Examples


Web Scripting Misc


jQuery


node.js

Like it? Help me by telling your friends. Or, Put $5 at patreon.

Or, Buy JavaScript in Depth

If you have a question, put $5 at patreon and message me.

Web Dev Tutorials