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

当前回答

I found this article enormously helpful. Huge thanks to yonran. I wanted to pass on some additional learning I found while implementing some of the techniques he provided. In FF6 and Chrome 9, support for media queries from JS was added, which can greatly simplify the media query approach necessary for determining zoom in FF. See the docs at MDN here. For my purposes, I only needed to detect whether the browser was zoomed in or out, I had no need for the actual zoom factor. I was able to get my answer with one line of JavaScript:

var isZoomed = window.matchMedia('(max--moz-device-pixel-ratio:0.99), (min--moz-device-pixel-ratio:1.01)').matches;

结合IE8+和Webkit解决方案(它们也是单行的),我能够在只有几行代码的情况下检测到绝大多数浏览器的缩放效果。

其他回答

在Internet Explorer 7、8和9中,这是有效的:

function getZoom() {
    var screen;

    screen = document.frames.screen;
    return ((screen.deviceXDPI / screen.systemXDPI) * 100 + 0.9).toFixed();
}

添加“+0.9”是为了防止舍入错误(否则,当浏览器缩放分别设置为105%和110%时,您将得到104%和109%)。

在IE6中不存在缩放,所以没有必要检查缩放。

这里没有变化!:

<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上)

问题在于使用的显示器类型,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%,并显示一个提示,建议使用更小的缩放系数。

基本上,我们有:

devicepixelratio,它同时考虑了浏览器级别的缩放*以及系统缩放/像素密度。 *在Mac/Safari上不考虑缩放级别 媒体查询 vw/vh CSS单位 缩放级别更改时触发的Resize事件,会导致窗口的有效大小更改

这对于正常的用户体验来说应该足够了。如果你需要检测缩放级别,这可能是糟糕UI设计的标志。

音高变焦更难跟踪,目前还没有考虑。

这可以检测比例。

html代码:

<body id="blog">

js:

function scale(){
return Math.round(100/(d.getElementById('blog').offsetWidth/d.getElementById('blog').getBoundingClientRect().width))/100;
}

缩放因子和比例不能相互混淆。用户控制“缩放”; “scale”是一个CSS转换。然而,11年零10个月前,understack指出:

基本上我想知道DIV在100%缩放时的尺寸。

这个是这样的。我将其与@media查询一起使用,以检测JavaScript中的设备缩放,即360x720可能应用0.5缩放;720 x360, 0.75。

var d=document;