Menu
How can I detect the page zoom level in all modern browsers? While this thread tells how to do it in IE7 and IE8, I can't find a good cross-browser solution.
Firefox stores the page zoom level for future access. On the first page load, would I be able to get the zoom level? Somewhere I read it works when a zoom change occurs after the page is loaded.
Is there a way to trap the 'zoom' event?
I need this because some of my calculations are pixel-based and they may fluctuate when zoomed.
Modified sample given by @tfl
This page alerts different height values when zoomed. [jsFiddle]
<html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js" type="text/javascript"/></script> </head> <body> <div id="xy" style="border:1px solid #f00; width:100px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sollicitudin tortor in lacus tincidunt volutpat. Integer dignissim imperdiet mollis. Suspendisse quis tortor velit, placerat tempor neque. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent bibendum auctor lorem vitae tempor. Nullam condimentum aliquam elementum. Nullam egestas gravida elementum. Maecenas mattis molestie nisl sit amet vehicula. Donec semper tristique blandit. Vestibulum adipiscing placerat mollis.</div> <button onclick="alert($('#xy').height());">Show</button> </body> </html> 
378
Using the window. One way to detect the browser zoom level is to use the window. devicePixelRatio property. When we zoom in or out, the resize event will be triggered. So we can listen to it with addEventListener .
var browserZoomLevel = Math. round(window. devicePixelRatio * 100); This will give you browser zoom percentage level on non-retina displays.
Click the three vertical dots in the top-right corner of Chrome and then select “Settings.” Click “Advanced” and then select the “Privacy and Security” option. Scroll down and click “Site Settings.” Now, locate the “Zoom Levels” option. In this menu, you can view the custom zoom levels you've set for any given website.
By default, Chrome sets the zoom level to 100%. To manually adjust the settings, use the Ctrl key and “+” or “-” combos to increase or decrease the page magnification. If you are using a mouse, you can hold down the keyboard Ctrl key and use the mouse wheel to zoom in or out.
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> You can try
var browserZoomLevel = Math.round(window.devicePixelRatio * 100); This will give you browser zoom percentage level on non-retina displays. For high DPI/retina displays, it would yield different values (e.g., 200 for Chrome and Safari, 140 for Firefox).
To catch zoom event you can use
$(window).resize(function() { // your code }); If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
