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

当前回答

在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中不存在缩放,所以没有必要检查缩放。

其他回答

我有这个解决方案只适用于手机(在Android上测试):

jQuery(function($){

zoom_level = function(){

    $("body").prepend('<div class="overlay" ' +
                'style="position:fixed; top:0%; left:0%; ' +
                'width:100%; height:100%; z-index:1;"></div>');

    var ratio = $("body .overlay:eq(0)").outerWidth() / $(window).width();
    $("body .overlay:eq(0)").remove();

    return ratio;
}

alert(zoom_level());

});

如果你想要缩放级别在缩放移动之后,你可能不得不设置一个小的超时,因为呈现延迟(但我不确定,因为我没有测试它)。

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

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

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

在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中不存在缩放,所以没有必要检查缩放。

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

这就是你所需要的。

没有在IE中测试这个,但是如果你创建一个元素elem with

min-width: 100%

然后

window.document.width / elem.clientWidth

将为您提供浏览器缩放级别(包括document.body.style.zoom因子)。