How to detect page zoom level in all modern browsers?
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. [↑ broken link. Archived copy → here].
Edit (2011-12-12): I've added a project that can be cloned: https://github.com/tombigel/detect-zoom
- IE8:
screen.deviceXDPI / screen.logicalXDPI
(or, for the zoom level relative to default zoom,screen.systemXDPI / screen.logicalXDPI
) - IE7:
var body = document.body,r = body.getBoundingClientRect(); return (r.left-r.right)/body.offsetWidth;
(thanks to this example or this answer) - FF3.5 ONLY:
screen.width
/ media query screen width (see below) (takes advantage of the fact thatscreen.width
uses device pixels but MQ width uses CSS pixels--thanks to Quirksmode widths) - FF3.6: no known method
- FF4+: media queries binary search (see below)
- WebKit: https://www.chromestatus.com/feature/5737866978131968 (thanks to Teo in the comments)
- WebKit: measure the preferred size of a div with
-webkit-text-size-adjust:none
. - WebKit: (broken since r72591)
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 bywindow.devicePixelRatio
. - Old WebKit? (unverified):
parseInt(getComputedStyle(document.documentElement,null).width) / document.documentElement.clientWidth
(from this answer) - Opera:
document.documentElement.offsetWidth
/ width of aposition: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. - Other: Flash solution from Sebastian
- Unreliable: listen to mouse events and measure change in screenX / change in clientX
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>
How to check zoom level is below 100% (ctrl and - ) in each browser?
Check the window size using this reference
From the website, you can find that the zoom level is below 100% if
$(window).width() >= screen.width
Related Topics
Convert Form Data to JavaScript Object With Jquery
Short Circuit Array.Foreach Like Calling Break
How to Sort an Array of Objects by Multiple Fields
Get Image Data Url in JavaScript
Why Does Parseint Yield Nan With Array#Map
Await Is Only Valid in Async Function
Is There a Cross-Browser Onload Event When Clicking the Back Button
How to Set Object Property (Of Object Property Of..) Given Its String Name in JavaScript
Google Maps Js API V3 - Simple Multiple Marker Example
Abort Ajax Requests Using Jquery
JavaScript Object: Access Variable Property by Name as String
Why Can't I Directly Modify a Component'S State, Really
How to Update Nested State Properties in React
How to Replace a Character At a Particular Index in JavaScript
How to Insert an Item into an Array At a Specific Index (JavaScript)
How to Efficiently Count the Number of Keys/Properties of an Object in JavaScript