如何在所有现代浏览器中检测页面缩放级别?

如何在所有现代浏览器中检测页面缩放级别?虽然这篇文章讲述了如何在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>

当前回答

zoom = ( window.outerWidth - 10 ) / window.innerWidth

这就是你所需要的。

2016-05-09 04:17:36

其他回答

这里没有变化!：

<html>
 <head>
  <title></title>
 </head>
<body>
 <div id="xy" style="width:400px;">
  foobar
 </div>
 <div>
  <button onclick="alert(document.getElementById('xy').style.width);">Show</button>
 </div>
</body>
</html>

创建一个简单的HTML文件，点击按钮。不管什么缩放级别:它会显示400px的宽度(至少在firefox和ie8上)

2009-11-12 10:17:54

你可以试试

var browserZoomLevel = Math.round(window.devicePixelRatio * 100);

这将给你的浏览器缩放百分比水平在非视网膜显示。对于高DPI/视网膜显示器，它将产生不同的值(例如，Chrome和Safari为200,Firefox为140)。

捕获缩放事件，您可以使用

$(window).resize(function() { 
// your code 
});

2016-06-14 14:34:37

您的计算仍然是基于一些CSS像素。现在它们在屏幕上的大小不同了。这就是整页缩放的意义所在。

您希望在192dpi设备上的浏览器上发生什么，因此通常在图像中的每个像素中显示四个设备像素?在50%缩放时，这个设备现在在一个设备像素中显示一个图像像素。

2009-12-04 22:32:48

在移动设备(Chrome for Android或Opera mobile)上，你可以通过window.visualViewport.scale来检测缩放。 https://developer.mozilla.org/en-US/docs/Web/API/Visual_Viewport_API

在Safari上检测:document.documentElement.clientWidth / window。innerWidth(如果设备上没有缩放则返回1)。

2018-06-08 21:27:20

截至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，则应用缩放。两者之间的差别告诉你缩放的大小。

注意:很少做距离计算，例如，当你可以采样一个新的鼠标事件，它离前一个事件很远的时候。

限制:假设用户将移动鼠标至少一点，缩放是不可知的，直到这个时候。

2017-01-19 10:19:42

如何在所有现代浏览器中检测页面缩放级别?

推荐文章

最新文章

标签