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.
clientX
, offsetX
, etc. When you zoom in, there are
fewer CSS pixels available so CSS widths shrink.
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.
width: 100%
within the body, how wide will it be?
(Formally, the width of block elements within the root block formatting context.)