如何在所有现代浏览器中检测页面缩放级别?虽然这篇文章讲述了如何在IE7和IE8中做到这一点，但我找不到一个好的跨浏览器解决方案。
Firefox存储页面缩放级别以供将来访问。在第一页加载，我能得到缩放级别吗?在某个地方，我读到当页面加载后发生缩放变化时，它是有效的。
有办法捕捉'缩放'事件吗?
我需要这个，因为我的一些计算是基于像素的，他们可能会在放大时波动。
@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)制作一个位置:固定<div>宽度:100% (id=zoomdiv)
2)页面加载时:
zoomlevel=$("#zoomdiv").width()*1.0 / screen.availWidth
它适用于我的ctrl+和ctrl-缩放。
或者我可以添加一行到$(window).onresize()事件，以获得活动缩放级别
代码:
<script>
var zoom=$("#zoomdiv").width()*1.0 / screen.availWidth;
$(window).resize(function(){
zoom=$("#zoomdiv").width()*1.0 / screen.availWidth;
alert(zoom);
});
</script>
<body>
<div id=zoomdiv style="width:100%;position:fixed;"></div>
</body>
附注:这是我的第一个帖子，请原谅任何错误
我的同事和我使用了来自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);
我使用了不同的方法，我创建了一个dom元素，高度和宽度固定为100px，位置固定，不透明度为0，基本上是一个隐藏元素。
然后我使用dom-to-image来捕获这个元素作为图像，这听起来可能有点过分，但我想要一个防弹的解决方案，我们已经在使用这个包了，然后验证输出图像宽度，如果它返回110，缩放是110%，这是非常准确的。
const ORIGINAL_ZOOM_SIZE = 100;
async function isValidateZoomLevel() {
const base64Render = await domToImage({
ref: hiddenElementReference,
});
const pixleRatio = Math.round(window.devicePixelRatio);
return new Promise((resolve, reject) => {
const img = new Image();
img.onload = () => resolve(ORIGINAL_ZOOM_SIZE === img.width / pixleRatio && ORIGINAL_ZOOM_SIZE === (img.height / pixleRatio));
img.onerror = reject;
img.src = base64Render;
});
}
