und*_*ack 296 javascript browser zoom detection
如何在所有现代浏览器中检测页面缩放级别？虽然这个线程告诉我如何在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>
yon*_*ran 269
现在,它比第一次提出这个问题时更加混乱.通过阅读我能找到的所有回复和博客文章,这里有一个摘要.我还设置了此页面来测试所有这些测量缩放级别的方法.
编辑(2011-12-12):我添加了一个可以克隆的项目:https://github.com/tombigel/detect-zoom
screen.deviceXDPI / screen.logicalXDPI或者,相对于默认缩放的缩放级别screen.systemXDPI / screen.logicalXDPI)var body = document.body,r = body.getBoundingClientRect(); return (r.left-r.right)/body.offsetWidth;感谢这个例子或这个答案)screen.width/媒体查询屏幕宽度(见下文)(利用screen.width使用设备像素但MQ宽度使用CSS像素的事实- 由于Quirksmode宽度)-webkit-text-size-adjust:none.document.width / jQuery(document).width()(感谢上面的Dirk van Oosterbosch).要获得设备像素(而不是相对于默认缩放)的比率,请乘以window.devicePixelRatio.parseInt(getComputedStyle(document.documentElement,null).width) / document.documentElement.clientWidth来自这个答案)document.documentElement.offsetWidth/ position:fixed; width:100%div的宽度.从这里(Quirksmode的宽度表说它是一个bug; innerWidth应该是CSS px).我们使用position:fixed元素来获取视口的宽度,包括滚动条所在的空间 ; document.documentElement.clientWidth排除此宽度.这在2011年的某个时候被打破了; 我知道无法再在Opera中获得缩放级别.这是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>
use*_*381 51
你可以试试
var browserZoomLevel = Math.round(window.devicePixelRatio * 100);
这将为您提供浏览器缩放百分比级别.
要捕捉缩放事件,您可以使用
$(window).resize(function() {
// your code
});
小智 45
对我来说,对于Chrome/Webkit,document.width / jQuery(document).width()没有用.当我将窗口缩小并放大到我的网站时,出现水平滚动条,document.width / jQuery(document).width()在默认缩放时不等于1.这是因为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";
}
小智 16
我和我的同事使用了https://github.com/tombigel/detect-zoom的脚本.此外,我们还动态创建了一个svg元素并检查其currentScale属性.它适用于Chrome,也可能是大多数浏览器.在FF上,必须关闭"仅缩放文本"功能.大多数浏览器都支持 SVG .在撰写本文时,在IE10,FF19和Chrome28上进行了测试.
var svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
svg.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
svg.setAttribute('version', '1.1');
document.body.appendChild(svg);
var z = svg.currentScale;
... more code ...
document.body.removeChild(svg);
小智 11
我发现这篇文章非常有帮助.非常感谢yonran.我想在实现他提供的一些技术时传递一些额外的学习知识.在FF6和Chrome 9中,增加了对JS媒体查询的支持,这可以大大简化确定FF缩放所需的媒体查询方法.请在此处查看MDN上的文档.出于我的目的,我只需要检测浏览器是否放大或缩小,我不需要实际的缩放系数.我能用一行JavaScript得到答案:
var isZoomed = window.matchMedia('(max--moz-device-pixel-ratio:0.99), (min--moz-device-pixel-ratio:1.01)').matches;
将此与IE8 +和Webkit解决方案(也是单行)相结合,我能够通过仅几行代码检测绝大多数浏览器上的缩放.
小智 11
zoom = ( window.outerWidth - 10 ) / window.innerWidth
这就是你所需要的.
您可以使用视觉视口 API：
window.visualViewport.scale;
它是标准的，可在桌面和移动设备上运行：浏览器支持。
基本上，我们有：
\n\nwindow.devicePixelRatio它考虑了浏览器级缩放*以及系统缩放/像素密度。vw/ vhCSS 单位resize事件，在缩放级别更改时触发，导致窗口的有效大小发生变化对于正常的用户体验来说这应该足够了。如果您需要检测缩放级别，这可能是 UI 设计不良的迹象。
\n\n俯仰-缩放更难跟踪，目前不考虑。
\n小智 6
截至2016年1月,我有一个解决方案.测试过Chrome,Firefox和MS Edge浏览器.
原理如下.收集相距很远的2个MouseEvent点.每个鼠标事件都带有屏幕和文档坐标.测量两个坐标系中2个点之间的距离.虽然由于浏览器家具,坐标系之间存在可变的固定偏移,但如果页面未缩放,则点之间的距离应相同.指定"远离"(我把它设为12像素)的原因是可以检测到小的变焦变化(例如90%或110%).
参考:https: //developer.mozilla.org/en/docs/Web/Events/mousemove
脚步:
添加鼠标移动侦听器
window.addEventListener("mousemove", function(event) {
// handle event
});
从鼠标事件中捕获4个测量值:
event.clientX, event.clientY, event.screenX, event.screenY
测量客户端系统中2个点之间的距离d_c
测量屏幕系统中2个点之间的距离d_s
如果d_c!= d_s则应用缩放.两者之间的差异告诉你缩放量.
NB很少进行距离计算,例如,当您可以采样远离前一个的新鼠标事件时.
限制:假设用户将鼠标移动至少一点,并且在此之前缩放是不可知的.
| 归档时间： |
|
| 查看次数： |
248906 次 |
| 最近记录： |