Detect page zoom change with jQuery in Safari

Question

I have a problem with Safari in a web application that contains a position:fixed element. When the page is zoomed out (smaller 100%) things break and would need to be fixed by calling a function. So I'd like to detect the user's zooming. I found this jQueryPlug-in a while ago:

http://mlntn.com/2008/12/11/javascript-jquery-zoom-event-plugin/

http://mlntn.com/demos/jquery-zoom/

It detects keyboard and mouse events that might lead to a page zoom level change. Fair enough. It works on current FF and IE but not on Safari. Any ideas what could be done to do something simmilar in current WebKit browsers?

score 24 · Accepted Answer · edited May 23 '17 at 12:09

24

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
    }
});

edited May 23 '17 at 12:09

Community

1
1

answered May 29 '11 at 14:17

newtron

5,938
1
23
19

4

I just tested this theory on Chrome and I seem to always get a ratio pretty close to 1, whether I'm zoomed to 100%, 67%, or 175%. on a side note, jQuery's `$(window).width()` returns the same value as `document.documentElement.clientWidth`, whereas `window.innerWidth` is generally slightly larger (although not enough to reflect the zoom amount). – redbmk Apr 01 '13 at 06:55
1

window.innerWidth is not the exactly width if appear the scrollbar. You have to do window.innerWidth - 17 to get 1 when there is no zoom – ccsakuweb Apr 08 '13 at 10:48
In this case, don't check if they are exactly equal (===) but check if their difference is smaller than 1 (Math.abs(element.scrollTop + element.height - child.innerHeight) < 1)) That should work for most cases – Marcos Pereira Aug 05 '15 at 22:49

score 2 · Answer 2 · edited May 23 '17 at 12:34

There is a nifty plugin built from yonran that can do the detection. Here is his previously answered question on StackOverflow. It works for most of the browsers. Application is as simple as this:

window.onresize = function onresize() {
  var r = DetectZoom.ratios();
  zoomLevel.innerHTML =
    "Zoom level: " + r.zoom +
    (r.zoom !== r.devicePxPerCssPx
        ? "; device to CSS pixel ratio: " + r.devicePxPerCssPx
        : "");
}

Demo

score 1 · Answer 3 · answered Jun 22 '15 at 08:55

srceen.width is fixed value but where as window.innerWidth value will change as per the zoom effect. please try the below code:

 $(window).resize(function() {
   if(screen.width == window.innerWidth){
       alert("you are on normal page with 100% zoom");
   } else if(screen.width > window.innerWidth){
       alert("you have zoomed in the page i.e more than 100%");
   } else {
       alert("you have zoomed out i.e less than 100%");
   }
});

score 1 · Answer 4 · answered Nov 29 '21 at 23:45

Differentiate between window resize, browser zoom change, and system dpi change

;(() => {
  const last = {
    devicePixelRatio: devicePixelRatio,
    innerWidth: innerWidth,
    innerHeight: innerHeight,
    outerWidth: outerWidth,
    outerHeight: outerHeight,
  }
      
  const browser = navigator.appVersion.includes('WebKit')
  
  const almostZero = n => n <= 1 && n >= -1
  
  window.addEventListener('resize', () => {
    if (last.devicePixelRatio !== devicePixelRatio) {
      if (browser ? almostZero(last.innerWidth - innerWidth) && almostZero(last.innerHeight - innerHeight)
          :almostZero(last.outerWidth - outerWidth) && almostZero(last.outerHeight - outerHeight)) {
        console.log('system wide dpi change')
      } else {
        console.log('browser level zoom change')
      }
    } else {
      console.log('window resize')
    }
    last.devicePixelRatio = devicePixelRatio
    last.innerWidth = innerWidth
    last.innerHeight = innerHeight
    last.outerWidth = outerWidth
    last.outerHeight = outerHeight
  })
})()

Works in Chrome & Firefox on Windows

7 years after the fact, thanks, I'll look at this – C.O. Dec 20 '21 at 16:23 — C.O., Dec 20 '21 at 16:23

Detect page zoom change with jQuery in Safari

4 Answers4

Linked