如何检测所有现代浏览器中的页面缩放级别？

javascript browser zooming detection

2022-08-29 23:44:05

如何检测所有现代浏览器中的页面缩放级别？虽然这个线程告诉如何在IE7和IE8中执行此操作，但我找不到一个好的跨浏览器解决方案。
Firefox 存储页面缩放级别以供将来访问。在第一个页面加载时，我能够获得缩放级别吗？在我读到的某个地方，当页面加载后发生缩放更改时，它可以工作。
有没有办法困住事件？'zoom'

我需要这个，因为我的一些计算是基于像素的，它们在缩放时可能会波动。

@tfl给出的修改样本

此页面在缩放时会发出不同的高度值警报。[jsFiddle]

<html>
    <head>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js" type="text/javascript"/></script>
    </head>
    <body>
        <div id="xy" style="border:1px solid #f00; width:100px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sollicitudin tortor in lacus tincidunt volutpat. Integer dignissim imperdiet mollis. Suspendisse quis tortor velit, placerat tempor neque. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent bibendum auctor lorem vitae tempor. Nullam condimentum aliquam elementum. Nullam egestas gravida elementum. Maecenas mattis molestie nisl sit amet vehicula. Donec semper tristique blandit. Vestibulum adipiscing placerat mollis.</div>
        <button onclick="alert($('#xy').height());">Show</button>
    </body>
</html>

答案 1

现在，这比第一次提出这个问题时更加混乱。通过阅读我能找到的所有回复和博客文章，这里有一个摘要。我还设置了此页面来测试所有这些测量缩放级别的方法。

编辑（2011-12-12）：我添加了一个可以克隆的项目：https://github.com/tombigel/detect-zoom

IE8：（或者，对于相对于默认缩放的缩放级别，screen.deviceXDPI / screen.logicalXDPIscreen.systemXDPI / screen.logicalXDPI)
IE7：（感谢这个例子或这个答案var body = document.body,r = body.getBoundingClientRect(); return (r.left-r.right)/body.offsetWidth;)
仅FF3.5：/媒体查询屏幕宽度（见下文）（利用使用设备像素但MQ宽度使用CSS像素的事实 - 多亏了Quirksmode宽度screen.widthscreen.width)
FF3.6：无已知方法
FF4+：媒体查询二进制搜索（见下文）
WebKit：https://www.chromestatus.com/feature/5737866978131968（感谢评论中的Teo）
WebKit：使用测量 div 的首选大小。-webkit-text-size-adjust:none
WebKit：（自 r72591 起中断）（感谢上面的 Dirk van Oosterbosch）。要获得设备像素的比率（而不是相对于默认缩放），请乘以。document.width / jQuery(document).width()window.devicePixelRatio
旧的 WebKit？（未验证）：（来自此答案parseInt(getComputedStyle(document.documentElement,null).width) / document.documentElement.clientWidth)
Opera： / div. 的宽度从这里开始（Quirksmode 的 widths 表说这是一个错误;innerWidth 应该是 CSS px）。我们使用 position：fixed 元素来获取视区的宽度，包括滚动条所在的空间;document.documentElement.clientWidth 排除了此宽度。自2011年的某个时候以来，这种情况就被打破了。我知道没有办法再在Opera中获得缩放级别。document.documentElement.offsetWidthposition:fixed; width:100%
其他：塞巴斯蒂安的闪存解决方案
不可靠：侦听鼠标事件并测量屏幕 X 中的变化/客户端 X 中的变化

以下是Firefox 4的二进制搜索，因为我不知道它公开的任何变量：

<style id=binarysearch></style>
<div id=dummyElement>Dummy element to test media queries.</div>
<script>
var mediaQueryMatches = function(property, r) {
  var style = document.getElementById('binarysearch');
  var dummyElement = document.getElementById('dummyElement');
  style.sheet.insertRule('@media (' + property + ':' + r +
                         ') {#dummyElement ' +
                         '{text-decoration: underline} }', 0);
  var matched = getComputedStyle(dummyElement, null).textDecoration
      == 'underline';
  style.sheet.deleteRule(0);
  return matched;
};
var mediaQueryBinarySearch = function(
    property, unit, a, b, maxIter, epsilon) {
  var mid = (a + b)/2;
  if (maxIter == 0 || b - a < epsilon) return mid;
  if (mediaQueryMatches(property, mid + unit)) {
    return mediaQueryBinarySearch(
        property, unit, mid, b, maxIter-1, epsilon);
  } else {
    return mediaQueryBinarySearch(
        property, unit, a, mid, maxIter-1, epsilon);
  }
};
var mozDevicePixelRatio = mediaQueryBinarySearch(
    'min--moz-device-pixel-ratio', '', a, b, maxIter, epsilon);
var ff35DevicePixelRatio = screen.width / mediaQueryBinarySearch(
    'min-device-width', 'px', 0, 6000, 25, .0001);
</script>

答案 2

您可以尝试

var browserZoomLevel = Math.round(window.devicePixelRatio * 100);

这将为您提供非视网膜显示器上的浏览器缩放百分比级别。对于高DPI/retina显示器，它将产生不同的值（例如，Chrome和Safari为200，Firefox为140）。

要捕捉缩放事件，您可以使用

$(window).resize(function() { 
// your code 
});