在JavaScript中捕获浏览器的"缩放"事件

Question

当用户更改页面中的缩放时,是否可以使用JavaScript检测？我只是想捕捉一个"缩放"事件并对其做出响应(类似于window.onresize事件).

谢谢.

Answer 1

没有办法主动检测是否有变焦.我在这里找到了一个很好的条目,你可以尝试如何实现它.

我发现了两种检测缩放级别的方法.检测缩放级别更改的一种方法依赖于百分比值未缩放的事实.百分比值相对于视口宽度,因此不受页面缩放的影响.如果您将两个要素,一个用百分比的位置,并用一个像素相同的位置,当页面被放大,他们会移动分开.找到两个元素的位置之间的比率,你就有了缩放级别.见测试用例. http://web.archive.org/web/20080723161031/http://novemberborn.net/javascript/page-zoom-ff3

您也可以使用上述帖子的工具来完成.问题是你或多或少地对页面是否缩放进行了有根据的猜测.这在某些浏览器中比其他浏览器更好用.

如果页面在缩放时加载页面,则无法判断页面是否被缩放.

Answer 2

让我们定义 px_ratio 如下：

px ratio = 物理像素与css px 的比率。

如果任何一个缩放页面，视口 pxes（px 与 pixel 不同）减小并且应该适合屏幕，因此比率（物理像素/ CSS_px ）必须变大。

但是在窗口大小调整中，屏幕尺寸和像素都会减小。所以这个比率将保持不变。

缩放：触发 windows.resize 事件 --> 并更改 px_ratio

但

调整大小：触发 windows.resize 事件 --> 不改变 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;
    }
}

关键是 CSS PX 和 Physical Pixel 之间的区别。

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

Answer 3

我正在使用这段JavaScript来对Zoom"事件"作出反应.
它轮询窗口宽度.(正如本页(伊恩·艾略特所链接)所建议的那样:http ://novemberborn.net/javascript/page-zoom-ff3 [archive])

使用Chrome,Firefox 3.6和Opera测试,而不是IE.

此致,马格努斯

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

Answer 4

好消息 大家有些人!更新缩放时,较新的浏览器将触发窗口调整大小事件.

Answer 5

这对我有用:

        var deviceXDPI = screen.deviceXDPI;
        setInterval(function(){
            if(screen.deviceXDPI != deviceXDPI){
                deviceXDPI = screen.deviceXDPI;
                ... there was a resize ...
            }
        }, 500);

它只在IE8上需要.所有其他浏览器自然会生成resize事件.