blog . sebastian martens

How to detect the Browsers Zoom Level / If the user changes Browser Zoom

[Update]: Example ZIP wasn’t working in deed. Thanks Unabus for the hint.
[Update]: jQuery no longer required. Changed initialisation method.
[Update]: Added ActionScript Source.
[Update]: Sorry, i posted the wrong version ( Thanks Ash for the hint ). The latest version now really supports Internet Explorer.

Every modern Web-Browsers gives you the possibility to zoom in/out the content of a website. If you zoom into the website this will easily enlarge the complete content for you. It includes all text and images. In many cases that makes it easier to read website at least for people with poor eyesight.
Now comes the BUT. Sometimes you have strange side-effects. For example when using the Flash plugin. If you don’t allow rescaling the flash content, which the flashplayer would otherwise easily does, you got some ugly sideeffects black borders or whatever. You may have your reasons for having none scalable flash ( if i don’t ran into this problem i would not write this, so at least i had my reasons – not only laziness ).

In many cases the side-effects don’t destroy your complete website and make it unuseable, but i would at least like to give the users a very small hint that their browser is zoomed and that this may effect the website layout ( i just recognize that this reminds a bit at the “This website is optimized for IE 6.0 and 1024×768 pixels” notices – how i hate this ). If i detect that the browser is zoomed if could also use other versions of my plugins/scripts/css/images/whatever, to make it look nice again – of couse the detection is the first step.

Update jsCallStack to Vector Class

When using the jsCallStack again after a while i just realized that it still uses an ArrayCollection – uuuu – how dirty. But now it’s updated to Vector.<Object> and you can again use it for your JavaScript calls from Flash.

cheers,
Sebastian