如何在所有现代浏览器中检测页面缩放级别？
>
如何在所有现代浏览器中检测页面缩放级别？虽然这个线程告诉如何在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.logicalxdpi（或者，对于相对于默认缩放的缩放级别，screen.systemxdpi/screen.logicalxdpi) - IE7:
var body=document.body,r=body.getBoundingClientRect（）；返回（r.left-r.right）/body.offsetwidth；（感谢此示例或此答案） - 仅FF3.5:
screen.width/媒体查询屏幕宽度（见下文）（利用了screen.width使用设备像素而MQ width使用CSS像素这一事实--这要归功于Quirksmode宽度） - FF3.6:无已知方法
- FF4+:媒体查询二分搜索（见下文）
- WebKit:https://www.cromestatus.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（来自此答案） - opera:
document.documentelement.offsetwidth/位置的宽度：fixed；宽度:100%div。从这里开始（QuirksMode的widths表说这是一个bug；innerWidth应该是CSS px）。我们使用position：fixed元素获得视口的宽度，包括滚动条所在的空间；Document.DocumentElement.ClientWidth排除此宽度。这种情况从2011年的某个时候开始就被打破了；我不知道在Opera中再有什么方法来获得变焦级别了。 - 其他：Sebastian提供的Flash解决方案
- 不可靠：侦听鼠标事件并测量screenX中的更改/ClientX中的更改
下面是对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>
-
问题内容： 如何在所有现代浏览器中检测页面缩放级别？尽管此线程说明了如何在IE7和IE8中执行此操作，但我找不到很好的跨浏览器解决方案。 Firefox存储页面缩放级别以供将来访问。在首页加载时，我能否获得缩放级别？当页面加载后发生缩放更改时，我在某处阅读过它可以工作。 有没有办法捕获事件？ 我需要这样做，因为我的一些计算是基于像素的，并且缩放时它们可能会波动。 @tfl给定的修改样本 缩放时，此
-
问题内容： 如何在页面加载时提高浏览器缩放级别？ ，最近我得到了增加宽度的任务，就像我们按Firefox一样并且浏览器缩放级别增加时，是否有任何方法可以在所有加载页面的浏览器中自动执行此操作。 问题答案： 我个人认为这是个坏主意。您可以设计您的网站，使其轻松地进行扩展（使用适当的CSS / HTML技术并不难），或者仅允许用户执行他们想要的操作（也许他们已经缩放了浏览器或使用了低分辨率）。通常，您
-
问题内容： 我需要在我的网站上创建2个按钮，以更改浏览器的缩放级别（+）（-）。由于图像尺寸和布局问题，我要求浏览器缩放而不是CSS缩放。 好吧，这有可能吗？我听到了相互矛盾的报道。 问题答案： 我会说在大多数浏览器中是不可能的，至少没有一些附加插件。在任何情况下，随着实现的变化，我都将尽量避免依赖浏览器的缩放（某些浏览器仅缩放字体，其他浏览器也缩放图像等）。除非您不太在乎用户体验。 如果需要更可
-
问题内容： 是否存在检测selenium浏览器何时打开错误页面的通用方法？例如，禁用您的互联网连接并执行 在Firefox中，Selenium将加载“重试”错误页面，其中包含诸如“ Firefox无法在www.google.com上建立与服务器的连接”之类的文本。selenium不会引发任何错误。 是否存在与浏览器无关的方法来检测这些情况？对于Firefox（Python），我可以做 但是（1）这
-
问题内容： 您好，我要在关闭选项卡（不是浏览器）事件中查找信息，如果Java中有一个applet信息。我想知道是否有一个事件或一种检查该方法的方法。我只想捕获事件并创建一个小弹出框，说明您的会话将过期或类似的内容。使用Java或Javascript完全有可能吗？ 更新：好的，你们向我指出的信息使我能够获得足够简单的JavaScript信息。现在它在IE，Chrome和Firefox中可以正常工作，
-
问题内容： 我是使用CSS3媒体查询的自适应设计的新手。我清楚地了解我们如何使用这些媒体查询来定位不同的设备，但令我感到困惑的地方是浏览器缩放！！ 例如 ：这是我正常的身体CSS规则 当我想更改此css规则以定位宽度在150px至600px范围内的设备时，我添加了此特定的媒体查询。 问题 ：我使用的是Google Chrome浏览器，当我放大到200％左右时，此特定的媒体查询就会起作用。 我如何知