Detect browser zoom level

Learn how to check the browser zoom level in JavaScript.

You can use multiple methods in JavaScript to detect the browser zoom level, depending on the browser and the specific requirements of your application. Here are a few approaches to think about.

Differentiating pinch zooming and text scaling

The user can change the font size of the browser either permanently via the browser’s settings or on-the-fly via the keyboard keys CTRL+/- (Windows, Ubuntu) or Command+/- (Mac) and that refers to the text scaling.

The other type of zoom is the pinch zoom. Pinch zooming zooms the entire page – layout, formatting, and text size – at the same time. Elements keep their size and shape, reducing the need for us to compensate for text scaling. In effect, the browser bears the burden of relative size.

Determining the text zoom level in a browser

Method 1: using outerWidth and innerWidth properties

This method uses the read-only Window properties window.outerWidth and window.innerWidth.

const textZoomLevel = (window.outerWidth / window.innerWidth) * 100;

If you want to count scrollbar size, then change window.outerWidth to window.outerWidth - 10. The number 10 is an average number for the scrollbar size.

Method 2: using outerWidth and innerWidth properties with different calculations

Here is a modified version number 2, but it doesn’t work in all browsers, e.g., in Chrome. It works, however, in Safari / macOS.

const textZoomLevel = Math.round(((window.outerWidth) / window.innerWidth) * 100) / 100;

Method 3: using screen.width and window.innerWidth properties

You can use the ratio of screen.width to window.innerWidth to estimate the text zoom level of the browser. Here’s a simple formula to calculate the text zoom level:

const textZoomLevel = screen.width / window.innerWidth;

This formula works because screen.width returns the total width of the screen in pixels, while window.innerWidth returns the width of the window’s content area in pixels. When the user zooms in or out, the window.innerWidth value changes, but the screen.width value remains the same.

By dividing screen.width by window.innerWidth, you get a ratio that represents the text zoom level. A ratio of 1 means the text is at its normal size (100% zoom), while a ratio greater than 1 means the text is zoomed in, and a ratio less than 1 means the text is zoomed out.

Method 4: using window.devicePixelRatio property

Another version uses window.devicePixelRatio property which provides the ratio of the resolution in physical pixels to the resolution in CSS pixels for the current device, which can be used to determine the text zoom level.

const textZoomLevel = Math.round(window.devicePixelRatio * 100);

Final code

Use the most accurate method sequentially. Method 4, then method 3, then method 1. You may consider using method 2, but that depends on your case.

function getTextZoomLevel() {
  if (typeof window.devicePixelRatio === 'number') {
    return Math.round(window.devicePixelRatio * 100);
  }

  if (screen.width && window.innerWidth) {
    return screen.width / window.innerWidth;
  }

  if (window.outerWidth && window.innerWidth) {
    return (window.outerWidth / window.innerWidth) * 100;
  }

  return 1;
}

Identifying the pinch zoom level in a browser

Accurately detecting browser zoom levels can be complex due to factors such as sidebar interference and high-DPI displays. This approach leverages the modern VisualViewport API to overcome these challenges. Specifically, it utilizes the scale property of the VisualViewport interface, which provides the pinch-zoom scaling factor applied to the visual viewport, ensuring a reliable zoom level detection.

For browsers that do not support the VisualViewport API, a fallback method is employed, which involves creating a temporary, hidden div element to measure the zoom level. This trick works by comparing the expected width of the div element (200px in this case) with its actual rendered width, allowing the calculation of the zoom ratio. The actual rendered width is affected by the browser’s zoom level, providing an indirect way to detect the zoom level when the VisualViewport API is not available.

function getPinchZoomLevel() {
  if (window.visualViewport?.scale !== undefined) {
    return window.visualViewport.scale * 100;
  }

  // Create reference element measurement system
  const reference = document.createElement('div');

  reference.style.cssText = `
    left: -9999px;
    position: absolute;
    visibility: hidden;
    width: 200px;
  `;
  document.body.appendChild(reference);
  
  const initialWidth = reference.offsetWidth;
  const currentWidth = reference.offsetWidth;

  document.body.removeChild(reference);

  // Calculate zoom ratio (1 = 100% zoom)
  return (200 / currentWidth) * 100;
}

Practical example of detecting browser zoom levels

See Detect browser zoom level example on SiteLint lab.