在 Safari 中使用 jQuery 检测页面缩放变化

IT技术 javascript jquery
2021-03-01 01:29:32

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

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

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

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

4个回答

它不是这个问题的直接重复，因为它涉及 Mobile Safari，但相同的解决方案也可以使用。

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

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

此外，您应该能够使用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
    }
});
在这种情况下，不要检查它们是否完全相等 (===)，而是检查它们的差值是否小于 1 (Math.abs(element.scrollTop + element.height - child.innerHeight) < 1)) 那应该适用于大多数情况
2021-04-26 01:29:32
如果出现滚动条，window.innerWidth 不是确切的宽度。当没有缩放时，您必须执行 window.innerWidth - 17 才能获得 1
2021-04-28 01:29:32
我刚刚在 Chrome 上测试了这个理论，无论我放大到 100%、67% 还是 175%，我似乎总是得到一个非常接近 1 的比率。附带说明一下，jQuery$(window).width()返回与 相同的值document.documentElement.clientWidth，而window.innerWidth通常略大（虽然不足以反映缩放量）。
2021-05-17 01:29:32

有一个由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
        : "");
}

演示

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

区分窗口调整大小、浏览器缩放更改和系统 dpi 更改

;(() => {
  const last = {
    devicePixelRatio: devicePixelRatio,
    innerWidth: innerWidth,
    innerHeight: innerHeight,
    outerWidth: outerWidth,
    outerHeight: outerHeight,
  }
      
  const browser = navigator.appVersion.includes('WebKit')
  
  const almostZero = n => n <= 1 && n >= -1
  
  window.addEventListener('resize', () => {
    if (last.devicePixelRatio !== devicePixelRatio) {
      if (browser ? almostZero(last.innerWidth - innerWidth) && almostZero(last.innerHeight - innerHeight)
          :almostZero(last.outerWidth - outerWidth) && almostZero(last.outerHeight - outerHeight)) {
        console.log('system wide dpi change')
      } else {
        console.log('browser level zoom change')
      }
    } else {
      console.log('window resize')
    }
    last.devicePixelRatio = devicePixelRatio
    last.innerWidth = innerWidth
    last.innerHeight = innerHeight
    last.outerWidth = outerWidth
    last.outerHeight = outerHeight
  })
})()

适用于 Windows 上的 Chrome 和 Firefox

事后7年，谢谢，我会看看这个
2021-05-06 01:29:32
其它你可能感兴趣的问题
上一篇我可以将每一行多行文本包装在一个跨度中吗？ 下一篇如何在 node.js 的客户端包含 javascript？