如何检测所有现代浏览器中的页面缩放级别？虽然这 thread告诉如何在 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>
最佳答案
现在比第一次问这个问题时更乱了。通过阅读我能找到的所有回复和博客文章，这里有一个总结。我还设置了 this page 来测试所有这些测量缩放级别的方法。 [↑ 断开的链接。存档副本 → here ].
编辑(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;(感谢 this example 或 this answer ) - 仅限 FF3.5:
screen.width/媒体查询屏幕宽度(见下文)(利用screen.width使用设备像素但 MQ 宽度使用 CSS 像素这一事实——感谢 Quirksmode widths ) - 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 above)。要获得设备像素比率(而不是相对于默认缩放比例)，请乘以window.devicePixelRatio. - 旧的 WebKit？(未验证):
parseInt(getComputedStyle(document.documentElement,null).width) / document.documentElement.clientWidth(来自this answer) - 歌剧:
document.documentElement.offsetWidth/position:fixed; width:100%的宽度分区from here (Quirksmode's widths table 说这是一个错误；innerWidth 应该是 CSS px)。我们使用 position:fixed 元素来获取视口(viewport)的宽度包括滚动条所在的空间； document.documentElement.clientWidth 不包括此宽度。这在 2011 年的某个时候被打破了；我知道没有办法再在 Opera 中获得缩放级别。 - 其他:Flash solution from Sebastian
- 不可靠:监听鼠标事件并测量 screenX 的变化/clientX 的变化
这是 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>
关于javascript - 如何在所有现代浏览器中检测页面缩放级别？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59591339/