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

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.(
  ..,
  ..,
  ..,
  ..,
  ..
);


 screenWidth = screen.;
 screenHeight = screen.;


 pageX = . || .. || .. || ;
 pageY = . || .. || .. || ;


 screenX = . !==  ? . : .;
 screenY = . !==  ? . : .;

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.

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.

.(,  {
  .(, ., .);
});

.(,  {
  .(, .);
});

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

// 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..,
  ..,
  ..,
  ..,
  ..
);


 screenWidth = screen.;
 screenHeight = screen.;


 pageX = . || .. || .. || ;
 pageY = . || .. || .. || ;


 screenX = . !==  ? . : .;
 screenY = . !==  ? . : .;

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?

• 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.