在 JavaScript 中捕获浏览器的“缩放”事件缩放：触发窗口.调整大小事件 -->并更改px_ratio

javascript events zooming

2022-08-30 01:45:31

是否可以使用 JavaScript 检测用户何时更改页面的缩放比例？我只想捕捉一个“缩放”事件并响应它（类似于window.onresize事件）。

谢谢。

答案 1

没有办法主动检测是否有缩放。我在这里找到了一个很好的条目，关于如何尝试实现它。

我找到了两种检测缩放级别的方法。检测缩放级别变化的一种方法依赖于百分比值未缩放的事实。百分比值是相对于视区宽度而言的，因此不受页面缩放的影响。如果插入两个元素，一个元素的位置以百分比表示，另一个元素的位置以像素为单位，则在缩放页面时，它们将分开。找到两个元素的位置之间的比率，你就得到了缩放级别。请参阅测试用例。http://web.archive.org/web/20080723161031/http://novemberborn.net/javascript/page-zoom-ff3

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

如果页面在缩放时加载您的页面，则无法判断页面是否被缩放。

答案 2

让我们定义px_ratio如下：

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

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

但是在窗口调整大小时，屏幕大小和pxs一样减小。所以这个比例会保持下去。

缩放：触发窗口.调整大小事件 -->并更改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和物理像素之间的区别。

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