Catch browser's “zoom” event in JavaScript

前端 未结 16 1561
眼角桃花
眼角桃花 2020-11-22 05:45

Is it possible to detect, using JavaScript, when the user changes the zoom in a page? I simply want to catch a \"zoom\" event and respond to it (similar to window.onresize e

相关标签:
16条回答
  • 2020-11-22 06:01

    Here is a native way (major frameworks cannot zoom in Chrome, because they dont supports passive event behaviour)

    
    //For Google Chrome
    document.addEventListener("mousewheel", event => {
      console.log(`wheel`);
      if(event.ctrlKey == true)
      {
        event.preventDefault();
        if(event.deltaY > 0) {
          console.log('Down');
        }else {
          console.log('Up');
        }
      }
    }, { passive: false });
    
    // For Mozilla Firefox
    document.addEventListener("DOMMouseScroll", event => {
      console.log(`wheel`);
      if(event.ctrlKey == true)
      {
        event.preventDefault();
        if(event.detail > 0) {
          console.log('Down');
        }else {
          console.log('Up');
        }
      }
    }, { passive: false });
    
    
    0 讨论(0)
  • 2020-11-22 06:02

    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.

    0 讨论(0)
  • 2020-11-22 06:02

    Lets define px_ratio as below:

    px ratio = ratio of physical pixel to css px.

    if any one zoom The Page, the viewport pxes (px is different from pixel ) reduces and should be fit to The screen so the ratio (physical pixel / CSS_px ) must get bigger.

    but in window Resizing, screen size reduces as well as pxes. so the ratio will maintain.

    zooming: trigger windows.resize event --> and change px_ratio

    but

    resizing: trigger windows.resize event --> doesn’t change px_ratio

    //for zoom detection
    px_ratio = window.devicePixelRatio || window.screen.availWidth / document.documentElement.clientWidth;
    
    $(window).resize(function(){isZooming();});
    
    function isZooming(){
        var newPx_ratio = window.devicePixelRatio || window.screen.availWidth / document.documentElement.clientWidth;
        if(newPx_ratio != px_ratio){
            px_ratio = newPx_ratio;
            console.log("zooming");
            return true;
        }else{
            console.log("just resizing");
            return false;
        }
    }
    

    The key point is difference between CSS PX and Physical Pixel.

    https://gist.github.com/abilogos/66aba96bb0fb27ab3ed4a13245817d1e

    0 讨论(0)
  • 2020-11-22 06:06

    I'm using this piece of JavaScript to react to Zoom "events".
    It polls the window width. (As somewhat suggested on this page (which Ian Elliott linked to): http://novemberborn.net/javascript/page-zoom-ff3 [archive])

    Tested with Chrome, Firefox 3.6 and Opera, not IE.

    Regards, Magnus

    var zoomListeners = [];
    
    (function(){
      // Poll the pixel width of the window; invoke zoom listeners
      // if the width has been changed.
      var lastWidth = 0;
      function pollZoomFireEvent() {
        var widthNow = jQuery(window).width();
        if (lastWidth == widthNow) return;
        lastWidth = widthNow;
        // Length changed, user must have zoomed, invoke listeners.
        for (i = zoomListeners.length - 1; i >= 0; --i) {
          zoomListeners[i]();
        }
      }
      setInterval(pollZoomFireEvent, 100);
    })();
    
    0 讨论(0)
  • 2020-11-22 06:06

    Good news everyone some people! Newer browsers will trigger a window resize event when the zoom is changed.

    0 讨论(0)
  • 2020-11-22 06:07

    Although this is a 9 yr old question, the problem persists!

    I have been detecting resize while excluding zoom in a project, so I edited my code to make it work to detect both resize and zoom exclusive from one another. It works most of the time, so if most is good enough for your project, then this should be helpful! It detects zooming 100% of the time in what I've tested so far. The only issue is that if the user gets crazy (ie. spastically resizing the window) or the window lags it may fire as a zoom instead of a window resize.

    It works by detecting a change in window.outerWidth or window.outerHeight as window resizing while detecting a change in window.innerWidth or window.innerHeight independent from window resizing as a zoom.

    //init object to store window properties
    var windowSize = {
      w: window.outerWidth,
      h: window.outerHeight,
      iw: window.innerWidth,
      ih: window.innerHeight
    };
    
    window.addEventListener("resize", function() {
      //if window resizes
      if (window.outerWidth !== windowSize.w || window.outerHeight !== windowSize.h) {
        windowSize.w = window.outerWidth; // update object with current window properties
        windowSize.h = window.outerHeight;
        windowSize.iw = window.innerWidth;
        windowSize.ih = window.innerHeight;
        console.log("you're resizing"); //output
      }
      //if the window doesn't resize but the content inside does by + or - 5%
      else if (window.innerWidth + window.innerWidth * .05 < windowSize.iw ||
        window.innerWidth - window.innerWidth * .05 > windowSize.iw) {
        console.log("you're zooming")
        windowSize.iw = window.innerWidth;
      }
    }, false);

    Note: My solution is like KajMagnus's, but this has worked better for me.

    0 讨论(0)
提交回复
热议问题