JS: Find Window Size

By Xah Lee. Date: . Last updated: .

How to find the viewport size?

document.documentElement.clientWidth

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

How to find screen size?

screen.width and height.

How to find scroll amount?

window.pageXOffset and pageYOffset

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

How to 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
Liket it? Put $5 at patreon.

Or, Buy JavaScript in Depth

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

Web Dev Tutorials

  1. HTML
  2. Visual CSS
  3. JS in Depth
  4. JS Reference
  5. DOM
  6. SVG
  7. Web Dev Blog