Now it's an even bigger mess than it was when this question was first asked. From reading all the responses and blog posts I could find, here's a summary. I also set up this page to test all these methods of measuring the zoom level.
Edit (2011-12-12): I've added a project that can be cloned: https://github.com/tombigel/detect-zoom
screen.deviceXDPI / screen.logicalXDPI
(or, for the zoom level relative to default zoom, screen.systemXDPI / screen.logicalXDPI
)var body = document.body,r = body.getBoundingClientRect(); return (r.left-r.right)/body.offsetWidth;
(thanks to this example or this answer)screen.width
/ media query screen width (see below) (takes advantage of the fact that screen.width
uses device pixels but MQ width uses CSS pixels--thanks to Quirksmode widths)-webkit-text-size-adjust:none
.document.width / jQuery(document).width()
(thanks to Dirk van Oosterbosch above). To get ratio in terms of device pixels (instead of relative to default zoom), multiply by window.devicePixelRatio
.parseInt(getComputedStyle(document.documentElement,null).width) / document.documentElement.clientWidth
(from this answer)document.documentElement.offsetWidth
/ width of a position:fixed; width:100%
div. from here (Quirksmode's widths table says it's a bug; innerWidth should be CSS px). We use the position:fixed element to get the width of the viewport including the space where the scrollbars are; document.documentElement.clientWidth excludes this width. This is broken since sometime in 2011; I know no way to get the zoom level in Opera anymore.Here's a binary search for Firefox 4, since I don't know of any variable where it is exposed:
<style id=binarysearch></style>
<div id=dummyElement>Dummy element to test media queries.</div>
<script>
var mediaQueryMatches = function(property, r) {
var style = document.getElementById('binarysearch');
var dummyElement = document.getElementById('dummyElement');
style.sheet.insertRule('@media (' + property + ':' + r +
') {#dummyElement ' +
'{text-decoration: underline} }', 0);
var matched = getComputedStyle(dummyElement, null).textDecoration
== 'underline';
style.sheet.deleteRule(0);
return matched;
};
var mediaQueryBinarySearch = function(
property, unit, a, b, maxIter, epsilon) {
var mid = (a + b)/2;
if (maxIter == 0 || b - a < epsilon) return mid;
if (mediaQueryMatches(property, mid + unit)) {
return mediaQueryBinarySearch(
property, unit, mid, b, maxIter-1, epsilon);
} else {
return mediaQueryBinarySearch(
property, unit, a, mid, maxIter-1, epsilon);
}
};
var mozDevicePixelRatio = mediaQueryBinarySearch(
'min--moz-device-pixel-ratio', '', a, b, maxIter, epsilon);
var ff35DevicePixelRatio = screen.width / mediaQueryBinarySearch(
'min-device-width', 'px', 0, 6000, 25, .0001);
</script>