现在比第一次问这个问题时更混乱。通过阅读我能找到的所有回复和博客文章,这里是一个摘要。我还设置了这个页面来测试所有这些测量缩放级别的方法。
编辑(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;
感谢这个例子或这个答案)
- FF3.5 ONLY :
screen.width
/ 媒体查询屏幕宽度(见下文)(利用screen.width
使用设备像素但 MQ 宽度使用 CSS 像素的事实——感谢Quirksmode 宽度)
- FF3.6:没有已知的方法
- FF4+:媒体查询二分搜索(见下文)
- WebKit:https : //www.chromestatus.com/feature/5737866978131968(感谢评论中的 Teo)
- WebKit:使用 测量 div 的首选大小
-webkit-text-size-adjust:none
。
- 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
/ position:fixed; width:100%
div 的宽度。从这里开始(Quirksmode 的宽度表说这是一个错误;innerWidth 应该是 CSS px)。我们使用 position:fixed 元素来获取视口的宽度,包括滚动条所在的空间;document.documentElement.clientWidth 不包括此宽度。这在 2011 年的某个时候就被打破了;我知道没有办法在 Opera 中获得缩放级别了。
- 其他:来自 Sebastian 的 Flash 解决方案
- 不可靠:监听鼠标事件并测量 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>