Calculating zoom using Javascript

2011-02-22 (updated 2012-05-24)

Reading through the responses to the question: “How to detect page zoom level in all modern browsers?”, I made a script to detect zoom on GitHub.

Also, here's a dimensions test page to try in multiple browsers and zoom levels.

Units

• CSS pixels are the unit of all CSS values and any element’s clientX, offsetX, etc. When you zoom in, there are fewer CSS pixels available so CSS widths shrink.
• Device pixels are the physical pixels that the browser draws to. Usually, each pixel owns three subpixels (red, green, and blue). But beware if your device is a PenTile display, in which case each pixel has to share a subpixel with a neighboring pixel.
• Screen (system) pixels are the unit of all the properties that refer to the screen: screen.width, window.screenX, window.outerWidth, event.screenX. Older browsers returned these measurements in device pixels, which don’t change with zoom. Firefox 4 begain reporting these in CSS pixels according to the spec. And then there’s WebKit (Nexus One and iPhone) and IE8, which take this in a crazy bizarre level, where device vendors report whatever they want for screen.width, and then developers have to convert screen pixels to device pixels using a ratio stored somewhere. So now there are three types of pixel we have to deal with.

Important dimensions from A tale of two viewports

• “Layout viewport” width: The width inside the window, not including scrollbars. When something is width: 100% within the body, how wide will it be? (Formally, the width of block elements within the root block formatting context.)
• “Visual viewport” width: when an iPhone zooms in, how big is the viewport that can be seen? On mobile browsers, this is different from the layout viewport because mobile browsers don’t re-flow the page when you zoom.
• “Document” width: the width of the document. When the document overflows outside the viewport, this should include the off-screen parts of the document too.