Javascript 在 Safari 中使用 jQuery 检测页面缩放变化
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6163174/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Detect page zoom change with jQuery in Safari
提问by C.O.
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:
我在包含 position:fixed 元素的 Web 应用程序中遇到 Safari 问题。当页面缩小（小 100%）时，事情会中断，需要通过调用函数来修复。所以我想检测用户的缩放。不久前我发现了这个 jQueryPlug-in：
http://mlntn.com/2008/12/11/javascript-jquery-zoom-event-plugin/
http://mlntn.com/2008/12/11/javascript-jquery-zoom-event-plugin/
http://mlntn.com/demos/jquery-zoom/
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?
它检测可能导致页面缩放级别更改的键盘和鼠标事件。很公平。它适用于当前的 FF 和 IE，但不适用于 Safari。有什么想法可以在当前的 WebKit 浏览器中做一些类似的事情吗？
回答by newtron
It's not a direct duplicate of this questionsince that deals with Mobile Safari, but the same solution will work.
它不是这个问题的直接重复，因为它涉及 Mobile Safari，但相同的解决方案也可以使用。
When you zoom in, window.innerWidth is adjusted, but document.documentElement.clientWidth is not, therefore:
放大时，window.innerWidth 会调整，但 document.documentElement.clientWidth 不会调整，因此：
var zoom = document.documentElement.clientWidth / window.innerWidth;
Furthermore, you should be able to use the onresizeevent handler (or jQuery's .resize()) to check for this:
此外，您应该能够使用onresize事件处理程序（或 jQuery 的.resize()）来检查这一点：
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
}
});
回答by Starx
There is a nifty plugin built from yonranthat can do the detection. Here is his previously answeredquestion on StackOverflow. It works for most of the browsers. Application is as simple as this:
有一个由yonran构建的漂亮插件可以进行检测。这是他之前在 StackOverflow上回答的问题。它适用于大多数浏览器。申请就这么简单：
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
: "");
}
回答by Dinnu Buddy
srceen.width is fixed value but where as window.innerWidth value will change as per the zoom effect. please try the below code:
srceen.width 是固定值，但 window.innerWidth 值会根据缩放效果而改变。请尝试以下代码：
$(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%");
}
});
