Novemberborn, Straight lines circle sometime

Detecting Page Zoom in Firefox 3 (And Others)

Firefox 3, or, technically, Gecko 1.9, comes with support for full page zoom. It works by scaling CSS pixels when the page is rendered – from the perspective of JavaScript or CSS there is no difference between a page zoomed to 200%, 50% or 100%.

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 Stage.height by <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!

link | javascript | 29 December 2007, 17:43


Comments

  1. It would be even better if page zoom worked so well that there would be no need to query the zoom level. Why do you need it for sIFR?

    Sjoerd Visscher | 29 December 2007, 18:17 | link

  2. sIFR passes the CSS pixel width to Flash, which doesn’t take the zoom level into account, so the text is the wrong size. I also can’t use Flash’s scale mode because it doesn’t work properly with sIFR. Fundamentally this is a Flash issue, not really a browser issue.

    Mark Wubben | 29 December 2007, 18:31 | link

  3. This one works in IE.

    Krijn Hoetmer | 31 December 2007, 12:56 | link

  4. Yep, forgot to mention it. The code could use a few improvements though.

    Mark Wubben | 31 December 2007, 13:29 | link

  5. hello! I need scalable sIFR fonts when I scale my Safari window. Anybody can help me? Thanks.

    Editor's note: Safari doesn't do full page zoom yet, and I do not intend to add font resize support to sIFR. So, that'd be a no from me.

    Michael | 6 January 2008, 14:20 | link

  6. I also can’t use Flash’s scale mode because it doesn’t work properly with sIFR. Fundamentally this is a Flash issue, not really a browser issue… ispanyolca tercüman

    Editor's note: sIFR 3 supports page zoom since the second beta.

    ispanyolca tercüme | 3 March 2008, 22:16 | link

  7. There is of course another problem with the first method, which is that the bug will probably be fixed soon anyway.

    I’ve been playing with firefox 3 and IE8 since the betas launched and I know which one I’m liking most!

    Jon | 30 March 2008, 22:38 | link

  8. Full page zoom is coming for Safari. It’s in the Webkit nightlies and works quite nicely. For most pages I’ve visited, Flash zooms fine.

    Kevin Barkan | 27 June 2008, 18:24 | link

Leave your comment

Please keep it polite and on topic. Yes, your e-mail address is required, but it's kept private. HTML is not allowed in the comments but you can use Markdown. Non-contributing comments run the risk of being removed. Especially if the website seem “fishy”. Spammers, beware.

(required)
(required, kept private)
(optional, but let's share it!)
(required)

Remember my details


Novemberborn: Extra

About the author

Mark Wubben is a European Dutchman and web hacker, based in Copenhagen, Denmark. Supercollider is Mark's freelance alter-ego.

Read more about Mark...

Go to

Jobs (NL)

Xopus zoekt programmeurs! Verbeter de code en win!

Subscribe