Get Screen, Page, and Browser Window Size in JavaScript

By the end of this page, you will understand the difference between screen size, viewport size, document size, scroll position, and browser window position in JavaScript. You will also learn the safest cross-browser properties to use, how they differ, and how to combine them into reusable helper functions.

In browser JavaScript, size and position can mean several different things. That is why properties like window.innerWidth, document.body.scrollWidth, and screen.width are not interchangeable.

The main idea is that the browser exposes different coordinate systems:

• Screen: the user's monitor or device display
• Viewport: the visible part of the web page inside the browser window
• Document/Page: the full web page, including content outside the visible area
• Scroll position: how far the user has moved through the page
• Window position: where the browser window sits on the screen

Understanding these differences matters because real applications often need accurate measurements for:

• responsive layouts
• modal positioning
• sticky headers
• infinite scrolling
• drag-and-drop UI
• analytics and viewport tracking

Here are the most common measurements:

• window.innerWidth / window.innerHeight → viewport size
• document.documentElement.clientWidth / clientHeight → fallback viewport size in older situations
• document.documentElement.scrollWidth / scrollHeight and related values → full document size
• window.pageXOffset / window.pageYOffset → page scroll position
• screen.width / screen.height → device screen size
• window.screenX / window.screenY → browser window position on the screen

Cross-browser code usually works by checking the modern property first, then falling back to older alternatives.

Think of a website as a large poster inside a movable frame sitting on a desk.

• The desk is the user's screen.
• The frame opening is the viewport.
• The full poster is the page/document.
• Sliding the poster behind the frame is scrolling.
• Moving the whole frame across the desk is the browser window position.

So:

• screenWidth / screenHeight = size of the desk
• windowWidth / windowHeight = size of the frame opening
• pageWidth / pageHeight = size of the full poster
• pageX / pageY = how far the poster has been slid
• screenX / screenY = where the frame sits on the desk

Core properties

// Viewport size
const windowWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
const windowHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;

// Full page size
const pageWidth = Math.max(
  document.body.scrollWidth,
  document.body.offsetWidth,
  document.documentElement.clientWidth,
  document.documentElement.scrollWidth,
  document.documentElement.offsetWidth
);

const pageHeight = Math.max(
  document.body.scrollHeight,
  document.body.offsetHeight,
  document.documentElement.clientHeight,
  document.documentElement.scrollHeight,
  document.documentElement.offsetHeight
);

// Screen size
const screenWidth = screen.width;
const screenHeight = screen.height;

// Scroll position
const pageX = window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft || 0;
const pageY = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;

// Browser window position on screen
const screenX = window.screenX !== undefined ? window.screenX : window.screenLeft;
const screenY = window.screenY !== undefined ? window.screenY : window.screenTop;

Reusable helper function

function getDimensions() {
  return {
    windowWidth: window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth,
    windowHeight: window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight,

    pageWidth: Math.max(
      document.body.scrollWidth,
      document.body.offsetWidth,
      document.documentElement.clientWidth,
      document.documentElement.scrollWidth,
      document.documentElement.offsetWidth
    ),

    pageHeight: Math.max(
      document.body.scrollHeight,
      document.body.offsetHeight,
      document.documentElement.clientHeight,
      document.documentElement.scrollHeight,
      document.documentElement.offsetHeight
    ),

    screenWidth: screen.width,
    screenHeight: screen.height,

    pageX: window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft || 0,
    pageY: window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0,

    screenX: window.screenX !== undefined ? window.screenX : window.screenLeft,
    screenY: window.screenY !== undefined ? window.screenY : window.screenTop
  };
}

console.log(getDimensions());

This function groups all measurements in one place. That makes it easier to reuse in resize and scroll handlers.

Consider this example:

function getViewportSize() {
  const width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
  const height = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;

  return { width, height };
}

const size = getViewportSize();
console.log(size);

Step by step:

1. The function starts by calculating width.
2. It first tries window.innerWidth.
   • In modern browsers, this usually exists and gives the viewport width.
3. If that is not available, it tries document.documentElement.clientWidth.
   • This often works as a fallback.
4. If that is also unavailable, it tries document.body.clientWidth.
5. The same process happens for height.
6. The function returns an object like:

{ width: 1280, height: 720 }

1. console.log(size) prints that object.

Now a scroll example:

const pageY = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
console.log(pageY);

If the page is scrolled 300 pixels downward:

• window.pageYOffset may return 300
• if not, document.documentElement.scrollTop may return 300
• if not, document.body.scrollTop may return 300
• otherwise the fallback is 0

This pattern is common in cross-browser JavaScript: try the preferred property first, then use fallbacks.

Responsive UI logic

JavaScript can check viewport size to decide whether to open a mobile menu, collapse a sidebar, or resize a canvas.

if (window.innerWidth < 768) {
  console.log("Use mobile layout");
}

Infinite scroll and lazy loading

You need the scroll position and viewport height to know when the user is near the bottom of the page.

const nearBottom = window.innerHeight + window.pageYOffset >= document.documentElement.scrollHeight - 200;

Centering popups or dialogs

You may need viewport and scroll values to place a floating element correctly.

Analytics and user behavior tracking

Applications sometimes record viewport size to understand how users view content.

Multi-window tools

Apps that open helper windows may use screenX and screenY to position or track browser windows.

In real projects, developers usually wrap these browser measurements in utility functions instead of reading raw properties everywhere.

Common patterns

Guarded access

Code often uses a fallback chain because browser APIs can differ:

const scrollY = window.pageYOffset || document.documentElement.scrollTop || 0;

Reusable utility module

function getScrollPosition() {
  return {
    x: window.pageXOffset || document.documentElement.scrollLeft || 0,
    y: window.pageYOffset || document.documentElement.scrollTop || 0
  };
}

Resize and scroll listeners

Measurements are often recalculated when the user resizes or scrolls.

window.addEventListener("resize", () => {
  console.log("viewport changed", window.innerWidth, window.innerHeight);
});

window.addEventListener("scroll", () => {
  console.log("scroll position", window.pageYOffset);
});

Validation before layout work

Developers often check values before using them in calculations to avoid undefined or incorrect layout logic.

Framework usage

Even in React, Vue, or Angular, the underlying browser APIs are still these same properties. Frameworks usually just wrap them with lifecycle hooks and state updates.

Confusing viewport size with page size

This is a very common mistake:

const pageHeight = window.innerHeight;

This gives the visible viewport height, not the full document height.

Use document measurements instead:

const pageHeight = Math.max(
  document.body.scrollHeight,
  document.documentElement.scrollHeight,
  document.body.offsetHeight,
  document.documentElement.offsetHeight,
  document.documentElement.clientHeight
);

Confusing scroll position with window position

These are different:

• pageXOffset / pageYOffset = scroll inside the page
• screenX / screenY = browser window position on the monitor

Using only one property with no fallback

Broken approach:

const x = document.body.scrollTop;

Safer approach:

const x = window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft || 0;

Assuming screen.width means browser width

screen.width is the monitor or device width, not the browser viewport width.

Forgetting that values can change

Viewport and scroll values are not fixed. If the user resizes the window or scrolls the page, your earlier measurements may become outdated.

Reading document size too early

If you measure before the page has fully rendered, the dimensions may be incomplete. Run code after the DOM is ready, or after content has loaded if necessary.

innerWidth vs clientWidth

pageYOffset vs scrollTop

// Viewport size
const windowWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
const windowHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;

// Full document size
const pageWidth = Math.max(
  document.body.scrollWidth,
  document.body.offsetWidth,
  document.documentElement.clientWidth,
  document.documentElement.scrollWidth,
  document.documentElement.offsetWidth
);

const pageHeight = Math.max(
  document.body.scrollHeight,
  document.body.offsetHeight,
  document.documentElement.clientHeight,
  document.documentElement.scrollHeight,
  document.documentElement.offsetHeight
);

// Screen size
const screenWidth = screen.width;
const screenHeight = screen.height;

// Scroll position
const pageX = window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft || 0;
const pageY = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;

// Browser window position on screen
const screenX = window.screenX !== undefined ? window.screenX : window.screenLeft;
const screenY = window.screenY !== undefined ? window.screenY : window.screenTop;

Rules to remember:

• Viewport is the visible area.
• Page/document is the full content.
• Screen is the physical display.
• Scroll position is how far the page moved.
• Window position is where the browser sits on the screen.
• Use fallbacks for broader browser support.
• Recalculate values on resize and scroll when needed.

What is the difference between window.innerWidth and screen.width?

window.innerWidth is the width of the visible browser viewport. screen.width is the width of the user's screen or monitor.

How do I get the full height of a web page in JavaScript?

Use a Math.max(...) combination of document measurements such as scrollHeight, offsetHeight, and clientHeight.

How do I get the current scroll position of the page?

Use window.pageYOffset for vertical scroll and window.pageXOffset for horizontal scroll, with fallbacks if needed.

What are screenX and screenY used for?

They tell you where the browser window is located on the screen, not where the page is scrolled.

Why do cross-browser examples use several fallback properties?

Different browsers and document modes have historically exposed size and scroll values through different properties.

Should I use document.body.scrollTop?

Only as a fallback. Prefer window.pageYOffset, then document.documentElement.scrollTop.

Do these values update automatically?

The properties update, but if you store them in variables, your stored values become old. Re-read them during scroll or resize events.

• DOM measurements — related because page and element sizes come from DOM layout properties.
• Viewport — essential for understanding visible browser area.
• Scroll events — useful when tracking pageX and pageY changes.
• Responsive design — viewport width and height are often used for layout decisions.
• Window object — most size and position properties come from window.
• Document object — full page measurements come from document and documentElement.
• Event listeners — needed to react to resize and scroll changes.
• CSS media queries — often used alongside JavaScript viewport checks.