I want to find out the zoom level of what is being displayed in a browser window based on the javascripts' window object properties to which I have access. I just can't seem to find the right mathematical formula for the zoom based on the inner width, page offset, etc. I found a solution, but that uses the document.body.getBoundingClientRect call which does not return anything in my case and for which I can't tell if there's a suitable replacement from the window properties. I am using Safari.
By default, Chrome sets the zoom level to 100%. To manually adjust the settings, use the Ctrl key and “+” or “-” combos to increase or decrease the page magnification.
Method 1: Using outerWidth and innerWidth Property: It is easier to detect the zoom level in webkit browsers like Chrome and Microsoft Edge. This method uses the outerWidth and innerWidthproperties, which are the inbuilt function of JavaScript.
You can determine zoom level by comparing various properties to document.documentElement.clientWidth
depending on your browser:
window.outerWidth
(on Opera)document.defaultView.getComputedStyle(document.documentElement,
null).width
(on Safari, Chrome)screen.deviceXDPI
and screen.logicalXDPI
(on IE8). The ratio of these values is the current zoom level (e.g. a ratio of 2 indicates a zoom of 200%).
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With