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

2018-06-16 21:18:50

如何在所有现代浏览器中检测页面缩放级别？虽然这个线程告诉我如何在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>

现在它比第一次问这个问题时要大得多。从阅读所有的答复和博客文章我可以找到，这里是一个总结。我还设置了此页面来测试所有这些测量缩放级别的方法。

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

IE8 ： screen.deviceXDPI / screen.logicalXDPI （或者，对于相对于默认缩放的缩放级别， screen.systemXDPI / screen.logicalXDPI ）

IE7 ： var body = document.body,r = body.getBoundingClientRect(); return (r.left-r.right)/body.offsetWidth; var body = document.body,r = body.getBoundingClientRect(); return (r.left-r.right)/body.offsetWidth; （感谢这个例子或者这个答案）

FF3.5 ONLY ： screen.width / media查询屏幕宽度（请参阅下文）（利用screen.width使用设备像素但MQ宽度使用CSS像素的事实 - 归功于Quirksmode宽度）

FF3.6 ：没有已知的方法

FF4 + ：媒体查询二进制搜索（见下文）

WebKit ：https：//www.chromestatus.com/feature/5737866978131968（感谢Teo的评论）

WebKit ：使用-webkit-text-size-adjust:none测量div的首选大小。

WebKit :(从r72591开始） document.width / jQuery(document).width() （感谢上面的Dirk van Oosterbosch）。要根据设备像素（而不是相对于默认缩放）获取比率，请乘以window.devicePixelRatio 。

旧的WebKit？ （ parseInt(getComputedStyle(document.documentElement,null).width) / document.documentElement.clientWidth ）： parseInt(getComputedStyle(document.documentElement,null).width) / document.documentElement.clientWidth （from this answer）

Opera ： document.documentElement.offsetWidth / position:fixed; width:100%宽度position:fixed; width:100% position:fixed; width:100% div。从这里（Quirksmode的宽度表表示这是一个bug; innerWidth应该是CSS px）。我们使用position：fixed元素来获取视口的宽度，包括滚动条所在的空间; document.documentElement.clientWidth不包括这个宽度。自2011年某个时候以来，这一情况已经打破我不知道如何在Opera中获得缩放级别。

其他：塞巴斯蒂安的Flash解决方案

不可靠：收听鼠标事件并测量clientX中screenX / change的变化

以下是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>

对于我来说，对于Chrome / Webkit， document.width / jQuery(document).width()不起作用。当我将窗口缩小并放大到我的站点以使水平滚动条出现时， document.width / jQuery(document).width()在默认缩放下不等于1。这是因为document.width包含视口外document.width一部分。

使用window.innerWidth和window.outerWidth工作。由于Chrome的某些原因，outerWidth以屏幕像素为单位，innerWidth以css像素单位测量。

var screenCssPixelRatio = (window.outerWidth - 8) / window.innerWidth;
if (screenCssPixelRatio >= .46 && screenCssPixelRatio <= .54) {
  zoomLevel = "-4";
} else if (screenCssPixelRatio <= .64) {
  zoomLevel = "-3";
} else if (screenCssPixelRatio <= .76) {
  zoomLevel = "-2";
} else if (screenCssPixelRatio <= .92) {
  zoomLevel = "-1";
} else if (screenCssPixelRatio <= 1.10) {
  zoomLevel = "0";
} else if (screenCssPixelRatio <= 1.32) {
  zoomLevel = "1";
} else if (screenCssPixelRatio <= 1.58) {
  zoomLevel = "2";
} else if (screenCssPixelRatio <= 1.90) {
  zoomLevel = "3";
} else if (screenCssPixelRatio <= 2.28) {
  zoomLevel = "4";
} else if (screenCssPixelRatio <= 2.70) {
  zoomLevel = "5";
} else {
  zoomLevel = "unknown";
}

你可以试试

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

这会为您提供浏览器缩放比例级别。

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

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

链接地址: http://www.djcxy.com/p/47767.html

上一篇: How to detect page zoom level in all modern browsers?

下一篇: How to validate X.509 Certificate in C# using Compact Framework