是否可以使用 JavaScript 检测用户何时更改页面的缩放比例？我只想捕捉“缩放”事件并对其做出响应（类似于 window.onresize 事件）。
谢谢。
在 JavaScript 中捕获浏览器的“缩放”事件
IT技术
javascript
events
zooming
2021-01-15 23:33:25
6个回答
没有办法主动检测是否有变焦。我在这里找到了一个很好的条目，介绍了如何尝试实施它。
我找到了两种检测缩放级别的方法。检测缩放级别变化的一种方法依赖于百分比值未缩放的事实。百分比值相对于视口宽度，因此不受页面缩放的影响。如果您插入两个元素，一个以百分比表示位置，另一个以像素表示相同位置，则它们会在页面缩放时分开。找到两个元素的位置之间的比率，你就得到了缩放级别。参见测试用例。 http://web.archive.org/web/20080723161031/http://novemberborn.net/javascript/page-zoom-ff3
您也可以使用上述帖子的工具来完成。问题是您或多或少地对页面是否缩放进行了有根据的猜测。这在某些浏览器中比其他浏览器效果更好。
如果他们在缩放时加载您的页面，则无法判断页面是否已缩放。
让我们定义 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
好消息 每个人有些人！当缩放更改时，较新的浏览器将触发窗口大小调整事件。
我正在使用这段 JavaScript 来响应 Zoom“事件”。
它轮询窗口宽度。（正如此页面上的一些建议（Ian Elliott 链接到的）：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);
})();
这对我有用：
var deviceXDPI = screen.deviceXDPI;
setInterval(function(){
if(screen.deviceXDPI != deviceXDPI){
deviceXDPI = screen.deviceXDPI;
... there was a resize ...
}
}, 500);
它仅在 IE8 上需要。所有其他浏览器自然会生成调整大小事件。