如何在所有现代浏览器中检测页面缩放级别?虽然这篇文章讲述了如何在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>
截至2016年1月，我有一个解决方案。在Chrome, Firefox和MS Edge浏览器中测试工作。
The principle is as follows. Collect 2 MouseEvent points that are far apart. Each mouse event comes with screen and document coordinates. Measure the distance between the 2 points in both coordinate systems. Although there are variable fixed offsets between the coordinate systems due to the browser furniture, the distance between the points should be identical if the page is not zoomed. The reason for specifying "far apart" (I put this as 12 pixels) is so that small zoom changes (e.g. 90% or 110%) are detectable.
参考:
https://developer.mozilla.org/en/docs/Web/Events/mousemove
步骤:
添加一个鼠标移动监听器
窗口。addEventListener("鼠标移动"，函数(事件){
//处理事件
})；
从鼠标事件中捕获4个测量值:
事件。clientX、事件。clientY、事件。screenX, event.screenY
测量客户端系统中两点之间的距离d_c
测量屏幕系统中两点之间的距离d_s
如果d_c != d_s，则应用缩放。两者之间的差别告诉你缩放的大小。
注意:很少做距离计算，例如，当你可以采样一个新的鼠标事件，它离前一个事件很远的时候。
限制:假设用户将移动鼠标至少一点，缩放是不可知的，直到这个时候。
截至2016年1月，我有一个解决方案。在Chrome, Firefox和MS Edge浏览器中测试工作。
The principle is as follows. Collect 2 MouseEvent points that are far apart. Each mouse event comes with screen and document coordinates. Measure the distance between the 2 points in both coordinate systems. Although there are variable fixed offsets between the coordinate systems due to the browser furniture, the distance between the points should be identical if the page is not zoomed. The reason for specifying "far apart" (I put this as 12 pixels) is so that small zoom changes (e.g. 90% or 110%) are detectable.
参考:
https://developer.mozilla.org/en/docs/Web/Events/mousemove
步骤:
添加一个鼠标移动监听器
窗口。addEventListener("鼠标移动"，函数(事件){
//处理事件
})；
从鼠标事件中捕获4个测量值:
事件。clientX、事件。clientY、事件。screenX, event.screenY
测量客户端系统中两点之间的距离d_c
测量屏幕系统中两点之间的距离d_s
如果d_c != d_s，则应用缩放。两者之间的差别告诉你缩放的大小。
注意:很少做距离计算，例如，当你可以采样一个新的鼠标事件，它离前一个事件很远的时候。
限制:假设用户将移动鼠标至少一点，缩放是不可知的，直到这个时候。
这个答案是基于user1080381的答案上devicePixelRatio返回错误的注释。
我发现在使用台式机、Surface Pro 3和Surface Pro 4时，这个命令在某些情况下也会错误地返回。
我发现它在我的桌面上是有效的，但是SP3和SP4给出的数字是不同的。
不过我注意到，SP3的缩放级别是我预期的1.5倍。当我查看显示设置时，SP3实际上被设置为150%，而不是我桌面上的100%。
因此，注释的解决方案应该是将返回的缩放级别除以当前所在机器的缩放比例。
我可以通过以下方法在Windows设置中获得比例:
ManagementObjectSearcher searcher = new ManagementObjectSearcher("SELECT * FROM Win32_DesktopMonitor");
double deviceScale = Convert.ToDouble(searcher.Get().OfType<ManagementObject>().FirstOrDefault()["PixelsPerXLogicalInch"]);
int standardPixelPerInch = 96;
return deviceScale / standardPixelPerInch;
所以在我的SP3的情况下，这是这段代码在100%缩放时的样子:
devicePixelRatio = 1.5
deviceScale = 144
deviceScale / standardPixelPerInch = 1.5
devicePixelRatio / (deviceScale / standardPixelPerInch) = 1
乘以user1080381的原始答案中的100，然后将得到100(%)的缩放。
问题在于使用的显示器类型，4k显示器和标准显示器。Chrome是迄今为止最聪明的，能够告诉我们缩放级别是什么，只是使用window.devicePixelRatio，显然它可以告诉什么像素密度是什么，并报告相同的数字。
其他浏览器就没有这么多了。IE和Edge可能是最差的，因为它们处理缩放级别的方式大不相同。要在4k显示器上获得相同大小的文本，您必须选择200%，而不是标准显示器上的100%。
截至2018年5月，以下是我检测到的一些最流行的浏览器(Chrome、Firefox和IE11)的缩放级别。我让它告诉我缩放百分比是多少。对于IE，即使4k显示器实际为200%，它也报告为100%，但文本大小实际上是相同的。
这里有一个小提琴:https://jsfiddle.net/ae1hdogr/
如果有人愿意尝试其他浏览器并更新小提琴，那么请这样做。我的主要目标是让这3个浏览器能够检测到人们在使用我的web应用程序时使用的缩放系数是否大于100%，并显示一个提示，建议使用更小的缩放系数。
