On this page

Is your site slow?

Discover performance bottlenecks to provide a better customer experience and meet your company’s revenue targets.

Laptop with the message "Detect Browser Zoom Level" and magnifier next to it.

Detect browser zoom level

Detecting the page and text zoom level using 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.

Pinch zooming vs. 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 sizing.

Detect text zoom level

This method uses window.outerWidth and window.innerWidth property.

Determine the text zoom level, version 1
const textZoomLevel = (window.outerWidth / window.innerWidth) * 100;

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

The above method works inconsistently across different browsers. Here is the other version.
Determine the text zoom level, version 2
const textZoomLevel = Math.round(((window.outerWidth) / window.innerWidth) * 100) / 100;

Detect pinch zoom level

This method uses modern VisualViewport API. The scale read-only property of the VisualViewport interface returns the pinch-zoom scaling factor applied to the visual viewport.

Determine the pinch zoom level using VisualViewport API scale property
const pinchZoomLevel = window.visualViewport.scale;

Workable example

See Detect browser zoom level example on SiteLint lab.

Related posts


Leave a Reply

SiteLint Audits: Monitoring in real-time Accessibility, Performance, Privacy, Security, SEO, Runtime Errors and Console Logs