在Safari中使用jQuery检测页面缩放更改 [英] Detect page zoom change with jQuery in Safari

问题描述

我在包含position：fixed元素的web应用程序中遇到Safari问题。当页面缩小（小于100％）时，事情就会中断，需要通过调用函数来修复。所以我想检测用户的缩放。我刚才发现了这个jQueryPlug：

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:

http://mlntn.com/2008/12/11/javascript-jquery-zoom-event-plugin/

http://mlntn.com/demos/jquery-zoom/

它检测可能导致页面缩放级别更改的键盘和鼠标事件。很公平。它适用于当前的FF和IE，但不适用于Safari。在当前的WebKit浏览器中可以做些什么来做同样的事情？

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?

推荐答案

它不是这个问题，因为它涉及Mobile Safari，但相同的解决方案将工作。

It's not a direct duplicate of this question since that deals with Mobile Safari, but the same solution will work.

放大时，会调整window.innerWidth，但不会调整document.documentElement.clientWidth：

When you zoom in, window.innerWidth is adjusted, but document.documentElement.clientWidth is not, therefore:

var zoom = document.documentElement.clientWidth / window.innerWidth;

此外，您应该可以使用 onresize 事件处理程序（或jQuery的 .resize（））来检查：

Furthermore, you should be able to use the onresize event handler (or jQuery's .resize()) to check for this:

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

这篇关于在Safari中使用jQuery检测页面缩放更改的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！