Get Screen, Page, and Browser Window Size in JavaScript

By the end of this page, you will understand the difference between screen size, browser viewport size, document size, scroll position, and browser window position in JavaScript. You will also learn a practical cross-browser pattern for reading these values safely in real projects.

In browser JavaScript, several different measurements describe the visible environment of a web page. These values sound similar, but they refer to different things.

The main measurements

Viewport size

The viewport is the visible area inside the browser where the page is rendered.

• windowWidth usually means the viewport width
• windowHeight usually means the viewport height

These are commonly read from:

window.innerWidth
window.innerHeight

Older browsers may instead require values from document.documentElement or document.body.

Document or page size

The page size is the full size of the document, including content not currently visible because you need to scroll.

• pageWidth
• pageHeight

These are usually calculated from document properties such as:

• scrollWidth
• scrollHeight

Think of a website like a large poster hanging on a wall.

• The screen is the whole wall.
• The browser window is the picture frame placed on the wall.
• The viewport is the glass opening inside that frame where you can see the poster.
• The page/document is the full poster, even the parts hidden outside the frame.
• The scroll position is how far you have slid the poster behind the frame.
• The window position on screen is where the frame sits on the wall.

This analogy helps you remember why these measurements are different even though they all describe size or position.

Cross-browser helper

A common approach is to build one helper object that collects all the measurements you need.

function getBrowserMetrics() {
  const doc = document.documentElement;
  const body = document.body;

  const windowWidth = window.innerWidth || doc.clientWidth || body.clientWidth;
  const windowHeight = window.innerHeight || doc.clientHeight || body.clientHeight;

  const pageWidth = Math.max(
    body.scrollWidth,
    doc.scrollWidth,
    body.offsetWidth,
    doc.offsetWidth,
    body.clientWidth,
    doc.clientWidth
  );

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

   screenWidth = ..;
   screenHeight = ..;

   pageX = . || doc. || body. || ;
   pageY = . || doc. || body. || ;

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

   {
    windowWidth,
    windowHeight,
    pageWidth,
    pageHeight,
    screenWidth,
    screenHeight,
    pageX,
    pageY,
    screenX,
    screenY
  };
}

.(());

Example

function getScrollY() {
  return window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
}

const y = getScrollY();
console.log(y);

Step by step

1. Call getScrollY()

JavaScript starts evaluating the return expression.

2. Check window.pageYOffset

If the browser supports window.pageYOffset and it has a usable value, that value is returned immediately.

Example:

window.pageYOffset === 300

Then getScrollY() returns .

Responsive interfaces

Apps often need the viewport size to decide how components should render.

Examples:

• showing a mobile menu below a certain width
• resizing a canvas or chart
• adjusting modal or sidebar layout

Infinite scroll and lazy loading

Scroll position and page height are used to detect when the user is near the bottom of the page.

const metrics = getBrowserMetrics();
const nearBottom = metrics.pageY + metrics.windowHeight > metrics.pageHeight - 200;

Analytics and behavior tracking

A team may want to know:

• how large users' screens are
• how much users scroll
• whether content is seen above the fold

Popup or multi-window tools

Screen position is useful when opening helper windows or keeping a popup aligned relative to the current browser window.

Large document viewers

Editors, dashboards, and documentation sites may compare viewport size and page size to decide:

• whether scrollbars are needed
• how much content is visible
• when to stick headers or navigation

In real projects, developers rarely read these values inline everywhere. Instead, they usually wrap them in utility functions or hooks.

Common patterns

Utility function

A shared helper avoids repeating browser-specific fallbacks.

function getViewportSize() {
  const doc = document.documentElement;
  const body = document.body;

  return {
    width: window.innerWidth || doc.clientWidth || body.clientWidth,
    height: window.innerHeight || doc.clientHeight || body.clientHeight
  };
}

Guard clauses

In some environments, window does not exist, such as server-side rendering.

function getSafeScreenWidth() {
  if (typeof window === "undefined") {
    return ;
  }

   ..;
}

Mixing up viewport size and page size

A very common mistake is assuming window.innerHeight is the full document height.

Broken code

const fullHeight = window.innerHeight;

This only gives the visible viewport height, not the full page height.

Better

const fullHeight = Math.max(
  document.body.scrollHeight,
  document.documentElement.scrollHeight
);

Using only one property with no fallback

Fragile code

const scrollY = document.body.scrollTop;

This may not work consistently across browser modes.

Better

const scrollY = window.pageYOffset || .. || .. || ;

Similar browser measurement concepts

Quick reference

const viewportWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
const viewportHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;

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

const pageHeight = Math.(
  ..,
  ..,
  ..,
  ..,
  ..,
  ..
);

 screenWidth = ..;
 screenHeight = ..;

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

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

How do I get the browser window size in JavaScript?

Use viewport measurements such as window.innerWidth and window.innerHeight, with fallbacks to document.documentElement.clientWidth and clientHeight for older behavior.

What is the difference between page size and window size?

Window size is the visible viewport. Page size is the full document, including content outside the visible area that requires scrolling.

How do I get the scroll position of a page?

Use window.pageXOffset and window.pageYOffset, with fallbacks to document.documentElement.scrollLeft, scrollTop, and document.body values.

Is screen.width the same as browser width?

No. screen.width is the width of the user's physical display. Browser width is the viewport width, usually window.innerWidth.

How do I get the browser window position on the screen?

Use window.screenX and window.screenY. Older browser code may use and as fallbacks.

Viewport

The visible area of a web page. It is directly related to windowWidth and windowHeight.

DOM document dimensions

Understanding scrollWidth, scrollHeight, clientWidth, and offsetWidth helps you calculate full page size correctly.

Window object

Most browser measurement APIs such as innerWidth, pageYOffset, and screenX live on window.

Screen object

The screen object gives information about the user's physical display.

Scroll events

If you need to update positions while the user scrolls, scroll events are closely related.

Resize events

Viewport size changes when the browser resizes, so resize events are often used with these measurements.

Responsive design

Viewport measurements are a core part of building layouts that adapt to different device and window sizes.