Detecting Page Zoom in Firefox 3 (And Others)
I’ve found two ways of detecting the zoom level. One way to detect zoom level changes relies on the fact that percentage values are not zoomed. A percentage value is relative to the viewport width, and thus unaffected by page zoom. If you insert two elements, one with a position in percentages, and one with the same position in pixels, they’ll move apart when the page is zoomed. Find the ratio between the positions of both elements and you’ve got the zoom level. See test case.
The problem with this solution is that it does not detect the zoom level when the page is first loaded.
Another solution I found relies on Flash. Not so much a problem for sIFR, for which I started this little investigation, but not the best solution either. Flash can be configured not to scale with its container page by setting
Stage.scaleMode = "noscale";. The
Stage.height value gives the height of the Flash movie as its actually rendered by the browser. In other words, this value is not affected by page zoom. The height assigned to the Flash movie
<object>, as it exists in the DOM, however, is affected by the zoom level. Simply dividing
<object>.height gives the zoom level, even on page load. See test case.
Of course, these two methods are hacks. It would be great if the browser can be queried for the zoom level.
Addendum: I just tested both approaches in Opera and IE 7. The percentages trick works in Opera, but not in IE. IE’s page zoom is quite a hack anyway, so that’s to be expected. The Flash solution works in all browsers, and is far more precise than the percentages approach. Definitely the way forward I’d say!