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
If you want to count also scrollbar size then change
window.outerWidth - 10. The number 10 is an average number for the scrollbar size.
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.
See Detect browser zoom level example on SiteLint lab.