How do I programmatically determine the current zoom level of a browser window?

Question

Hi,

I want to find out the zoom level of what is being displayed in a browser window based on the javascripts' window object properties (http://www.javascriptkit.com/jsref/window.shtml) 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.

Thank you, Mihai

Answer 1

You can determine zoom level by comparing various properties to document.documentElement.clientWidth depending on your browser:

• vs. window.outerWidth (on Opera)
• vs. document.defaultView.getComputedStyle(document.documentElement, null).width (on Safari, Chrome)
• or compare 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%).