How to get the size of the screen, current web page and browser window ?

To get the dimensions of the screen, browser window, and web page in JavaScript, use the following properties and methods:

1. Screen Size (User’s Monitor Resolution)

// Screen width and height (entire display)
const screenWidth = screen.width;    // e.g., 1920
const screenHeight = screen.height;  // e.g., 1080

2. Browser Window/Viewport Size

// Current viewport dimensions (visible area, including scrollbars)
const viewportWidth = window.innerWidth;
const viewportHeight = window.innerHeight;

// Viewport excluding scrollbars (rarely needed)
const clientWidth = document.documentElement.clientWidth;
const clientHeight = document.documentElement.clientHeight;

// For mobile devices with pinch-zoom (visual viewport)
const visualViewportWidth = window.visualViewport?.width;
const visualViewportHeight = window.visualViewport?.height;

3. Full Web Page Size (Including Scrolled Areas)

// Total scrollable width/height of the entire page
const pageWidth = Math.max(
  document.body.scrollWidth,
  document.documentElement.scrollWidth,
  document.body.offsetWidth,
  document.documentElement.offsetWidth
);

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

4. Current Scroll Position

// Horizontal and vertical scroll offsets (in pixels)
const scrollX = window.scrollX || window.pageXOffset;
const scrollY = window.scrollY || window.pageYOffset;

5. Device Pixel Ratio (High-DPI Screens)

// Physical vs. CSS pixel ratio (e.g., 2 for Retina displays)
const pixelRatio = window.devicePixelRatio;

Full Example

// Wait for the page to load before measuring
window.addEventListener('load', () => {
  // Screen size
  console.log('Screen:', screen.width, 'x', screen.height);

  // Viewport (browser window)
  console.log('Viewport:', window.innerWidth, 'x', window.innerHeight);

  // Full page dimensions
  const pageWidth = Math.max(
    document.body.scrollWidth,
    document.documentElement.scrollWidth
  );
  const pageHeight = Math.max(
    document.body.scrollHeight,
    document.documentElement.scrollHeight
  );
  console.log('Page:', pageWidth, 'x', pageHeight);

  // Scroll position
  console.log('Scroll Position:', window.scrollX, 'x', window.scrollY);

  // Device pixel ratio
  console.log('Pixel Ratio:', window.devicePixelRatio);
});

Key Notes

• Accuracy: Use load event to ensure all resources (images, etc.) are loaded before measuring.
• Cross-Browser: window.pageXOffset and window.pageYOffset are aliases for scrollX/scrollY.
• Mobile Viewports: Use window.visualViewport for accurate dimensions when pinch-zooming.
• Units: All values are in CSS pixels (except devicePixelRatio, which is a multiplier).

Visual Guide

Screen Size (screen.width x screen.height)
    |
    |—— Browser Window (innerWidth x innerHeight)
        |
        |—— Page Size (scrollWidth x scrollHeight)
        |    |
        |    |—— Scroll Position (scrollX x scrollY)
        |
        |—— Device Pixel Ratio (devicePixelRatio)