Catch browser's zoom event in JavaScript
There's no way to actively detect if there's a zoom. I found a good entry here on how you can attempt to implement it.
I’ve found two ways of detecting the
zoom level. One way to detect zoom
level changes relies on the fact that
percentage values are not zoomed. A
percentage value is relative to the
viewport width, and thus unaffected by
page zoom. If you insert two elements,
one with a position in percentages,
and one with the same position in
pixels, they’ll move apart when the
page is zoomed. Find the ratio between
the positions of both elements and
you’ve got the zoom level. See test
case.
http://web.archive.org/web/20080723161031/http://novemberborn.net/javascript/page-zoom-ff3
You could also do it using the tools of the above post. The problem is you're more or less making educated guesses on whether or not the page has zoomed. This will work better in some browsers than other.
There's no way to tell if the page is zoomed if they load your page while zoomed.
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 detect zoom event and set zoom in Chrome on current page programmatically?
In css:
zoom: 150%
Appply this css property to body
Or in js
$(document.body).css('zoom','150%')
To catch zoom event there are several techics ( check zoom on 'resize' for example ) - check this topic Catch browser's "zoom" event in JavaScript
How to catch Zoom event with GWT and Chrome
Late heads-up : this seems to be a bug in Chrome. I filed a report a couple of years ago but it seems not to be a priority for them. If you stumble upon this post and you want that "feature" too, please leave a message on that report, maybe it will speed up the things...
Detect page zoom change with jQuery in Safari
It's not a direct duplicate of this question since that deals with Mobile Safari, but the same solution will work.
When you zoom in, window.innerWidth is adjusted, but document.documentElement.clientWidth is not, therefore:
var zoom = document.documentElement.clientWidth / window.innerWidth;
Furthermore, you should be able to use the onresize
event handler (or jQuery's .resize()
) to check for this:
var zoom = document.documentElement.clientWidth / window.innerWidth;
$(window).resize(function() {
var zoomNew = document.documentElement.clientWidth / window.innerWidth;
if (zoom != zoomNew) {
// zoom has changed
// adjust your fixed element
zoom = zoomNew
}
});
trigger an event at certain zoom level
You can use the event zoomend
and then get the zoom level and do what you want after.
mymap.on('zoomend', function() {
let zoomLevel = map.getZoom();
if (zoomLevel === 13) {
// Do something
}
});
Related Topics
Jquery Validate Plugin - How to Create a Simple Custom Rule
What's the Difference Between Event.Stoppropagation and Event.Preventdefault
Detect the Internet Connection Is Offline
How to Post Urlencoded Form Data With $Http Without Jquery
Surprised That Global Variable Has Undefined Value in JavaScript
Chrome: Timeouts/Interval Suspended in Background Tabs
Count the Number of Occurrences of a Character in a String in JavaScript
Take a Screenshot of a Webpage With JavaScript
Use of .Apply() With 'New' Operator. Is This Possible
How to Count String Occurrence in String
How to Make Jquery UI Tabs Scroll Horizontally If There Are Too Many Tabs
Hide Scrollbar and Show on Hover Like Facebook's New Chat Sidebar