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

当前回答

现在的情况比刚提出这个问题时还要糟糕。通过阅读我所能找到的所有回复和博客文章,这里有一个总结。我还设置了这个页面来测试所有这些测量缩放级别的方法。[↑断裂链接。存档副本→此处]。

编辑(2011-12-12):我添加了一个可以克隆的项目:https://github.com/tombigel/detect-zoom

IE8: screen.deviceXDPI / screen.logicalXDPI (or, for the zoom level relative to default zoom, screen.systemXDPI / screen.logicalXDPI) IE7: var body = document.body,r = body.getBoundingClientRect(); return (r.left-r.right)/body.offsetWidth; (thanks to this example or this answer) FF3.5 ONLY: screen.width / media query screen width (see below) (takes advantage of the fact that screen.width uses device pixels but MQ width uses CSS pixels--thanks to Quirksmode widths) FF3.6: no known method FF4+: media queries binary search (see below) WebKit: https://www.chromestatus.com/feature/5737866978131968 (thanks to Teo in the comments) WebKit: measure the preferred size of a div with -webkit-text-size-adjust:none. WebKit: (broken since r72591) document.width / jQuery(document).width() (thanks to Dirk van Oosterbosch above). To get ratio in terms of device pixels (instead of relative to default zoom), multiply by window.devicePixelRatio. Old WebKit? (unverified): parseInt(getComputedStyle(document.documentElement,null).width) / document.documentElement.clientWidth (from this answer) Opera: document.documentElement.offsetWidth / width of a position:fixed; width:100% div. from here (Quirksmode's widths table says it's a bug; innerWidth should be CSS px). We use the position:fixed element to get the width of the viewport including the space where the scrollbars are; document.documentElement.clientWidth excludes this width. This is broken since sometime in 2011; I know no way to get the zoom level in Opera anymore. Other: Flash solution from Sebastian Unreliable: listen to mouse events and measure change in screenX / change in clientX

这里是Firefox 4的二进制搜索,因为我不知道它暴露在哪里:

<style id=binarysearch></style>
<div id=dummyElement>Dummy element to test media queries.</div>
<script>
var mediaQueryMatches = function(property, r) {
  var style = document.getElementById('binarysearch');
  var dummyElement = document.getElementById('dummyElement');
  style.sheet.insertRule('@media (' + property + ':' + r +
                         ') {#dummyElement ' +
                         '{text-decoration: underline} }', 0);
  var matched = getComputedStyle(dummyElement, null).textDecoration
      == 'underline';
  style.sheet.deleteRule(0);
  return matched;
};
var mediaQueryBinarySearch = function(
    property, unit, a, b, maxIter, epsilon) {
  var mid = (a + b)/2;
  if (maxIter == 0 || b - a < epsilon) return mid;
  if (mediaQueryMatches(property, mid + unit)) {
    return mediaQueryBinarySearch(
        property, unit, mid, b, maxIter-1, epsilon);
  } else {
    return mediaQueryBinarySearch(
        property, unit, a, mid, maxIter-1, epsilon);
  }
};
var mozDevicePixelRatio = mediaQueryBinarySearch(
    'min--moz-device-pixel-ratio', '', a, b, maxIter, epsilon);
var ff35DevicePixelRatio = screen.width / mediaQueryBinarySearch(
    'min-device-width', 'px', 0, 6000, 25, .0001);
</script>

其他回答

我使用了不同的方法,我创建了一个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; 
    });
  }

我有这个解决方案只适用于手机(在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());

});

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

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

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

min-width: 100%

然后

window.document.width / elem.clientWidth

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

你可以试试

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

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

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

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