>
如何在所有现代浏览器中检测页面缩放级别？虽然这个线程告诉如何在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
screen.devicexdpi/screen.logicalxdpi（或者，对于相对于默认缩放的缩放级别，screen.systemxdpi/screen.logicalxdpi)var body=document.body,r=body.getBoundingClientRect（）；返回（r.left-r.right）/body.offsetwidth；（感谢此示例或此答案）screen.width/媒体查询屏幕宽度（见下文）（利用了screen.width使用设备像素而MQ width使用CSS像素这一事实--这要归功于Quirksmode宽度）-webkit-text-size-adjust:none度量div的首选大小。document.width/jQuery（document）.width（）（感谢上面的Dirk van Oosterbosch）。若要根据设备像素（而不是相对于默认缩放）获得比率，请乘以Window.DevicePixelRatio.ParseInt（getComputedStyle（Document.DocumentElement,null).Width）/Document.DocumentElement.ClientWidth（来自此答案）document.documentelement.offsetwidth/位置的宽度：fixed；宽度:100%div。从这里开始（QuirksMode的widths表说这是一个bug；innerWidth应该是CSS px）。我们使用position：fixed元素获得视口的宽度，包括滚动条所在的空间；Document.DocumentElement.ClientWidth排除此宽度。这种情况从2011年的某个时候开始就被打破了；我不知道在Opera中再有什么方法来获得变焦级别了。下面是对Firefox4的二分搜索，因为我不知道它暴露在哪里的任何变量：
<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>
