The method I came up with, while not 100% accurate, works as a good approximation for moderate zoom levels.
h3. How to measure
First, we create a fixed-position element with 100% height. Placing this off-screen is OK:
bc. var d = document.createElement(“div”);
The next thing that happens is that we measure two different properties:
First we measure @window.innerHeight@ – As long as the viewport size remains the same, this should stay unchanged. Next, we measure the @offsetHeight@ of our newly created element, and here is where the magic happens:
While @window.innerHeight@ yields a value that is the physical pixel height of the viewport, the @offsetHeight@ of the created element yields the _virtual_ or _calculated_ value of the elements offsetHeight. Example:
If your viewport is 1000px tall, the @offsetHeight@ will be 1000 at 100% zoom. When you zoom to 200%, this height will instead be 500. Zoom to 50%, and the @offsetHeight@ will instead be 2000. In simple terms, this means that measuring the zoom level is reduced to dividing @offsetHeight@ by @window.innerHeight@.
There is a “demostration available”:http://virtuelvis.com/download/2005/05/zoom/detectzoom.html — view source to see exactly what’s going on.