javascript - 如何检测所有现代浏览器中的页面缩放级别？

Question

如何检测所有现代浏览器中的页面缩放级别？虽然这个线程告诉如何在 IE7 和 IE8 中执行此操作，但我找不到一个好的跨浏览器解决方案。
Firefox 存储页面缩放级别以供将来访问。在第一页加载时，我可以获得缩放级别吗？我在某处读到它在页面加载后发生缩放更改时起作用。
有没有办法捕获'zoom'事件？

我需要这个，因为我的一些计算是基于像素的，并且在缩放时它们可能会波动。

@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>

score 291 · Accepted Answer

现在它比第一次提出这个问题时更加混乱。通过阅读我能找到的所有回复和博客文章，这是一个摘要。我还设置了这个页面来测试所有这些测量缩放级别的方法。

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

IE8：（screen.deviceXDPI / screen.logicalXDPI或者，相对于默认缩放的缩放级别，screen.systemXDPI / screen.logicalXDPI）
IE7：（var body = document.body,r = body.getBoundingClientRect(); return (r.left-r.right)/body.offsetWidth;感谢这个例子或这个答案）
FF3.5 ONLY : screen.width/ 媒体查询屏幕宽度（见下文）（利用使用设备像素但 MQ 宽度使用 CSS 像素的事实screen.width——感谢Quirksmode 宽度）
FF3.6：没有已知的方法
FF4+：媒体查询二分搜索（见下文）
WebKit：https ://www.chromestatus.com/feature/5737866978131968 （感谢评论中的Teo）
WebKit：测量 div 的首选大小-webkit-text-size-adjust:none。
WebKit：（自r72591以来已损坏）document.width / jQuery(document).width()（感谢上面的 Dirk van Oosterbosch）。要获得设备像素的比率（而不是相对于默认缩放），请乘以window.devicePixelRatio.
旧的 WebKit？（未经证实）：（parseInt(getComputedStyle(document.documentElement,null).width) / document.documentElement.clientWidth来自这个答案）
Opera : / 一个divdocument.documentElement.offsetWidth的宽度。从这里（Quirksmode 的宽度表说这是一个错误；innerWidth 应该是 CSS px）。我们使用 position:fixed 元素来获取视口的宽度，包括滚动条所在的空间；document.documentElement.clientWidth 不包括此宽度。这自 2011 年的某个时候就被打破了；我不再知道如何在 Opera 中获得缩放级别。position:fixed; width:100%
其他：Sebastian 的 Flash 解决方案
不可靠：监听鼠标事件并测量 screenX 的变化/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>

score 75 · Accepted Answer

你可以试试

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

这将为您提供非视网膜显示器上的浏览器缩放百分比级别。对于高 DPI/视网膜显示器，它将产生不同的值（例如，Chrome 和 Safari 为 200，Firefox 为 140）。

要捕捉缩放事件，您可以使用

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

score 50 · Accepted Answer

对我来说，对于 Chrome/Webkit，document.width / jQuery(document).width()没有用。当我将窗口变小并放大到我的站点以使水平滚动条出现document.width / jQuery(document).width()时，默认缩放不等于 1。这是因为document.width在视口之外包含部分文档。

使用window.innerWidth和window.outerWidth工作。由于某种原因，在 Chrome 中，outerWidth 以屏幕像素为单位，innerWidth 以 css 像素为单位。

var screenCssPixelRatio = (window.outerWidth - 8) / window.innerWidth;
if (screenCssPixelRatio >= .46 && screenCssPixelRatio <= .54) {
  zoomLevel = "-4";
} else if (screenCssPixelRatio <= .64) {
  zoomLevel = "-3";
} else if (screenCssPixelRatio <= .76) {
  zoomLevel = "-2";
} else if (screenCssPixelRatio <= .92) {
  zoomLevel = "-1";
} else if (screenCssPixelRatio <= 1.10) {
  zoomLevel = "0";
} else if (screenCssPixelRatio <= 1.32) {
  zoomLevel = "1";
} else if (screenCssPixelRatio <= 1.58) {
  zoomLevel = "2";
} else if (screenCssPixelRatio <= 1.90) {
  zoomLevel = "3";
} else if (screenCssPixelRatio <= 2.28) {
  zoomLevel = "4";
} else if (screenCssPixelRatio <= 2.70) {
  zoomLevel = "5";
} else {
  zoomLevel = "unknown";
}

score 15 · Accepted Answer

我和我的同事使用了来自https://github.com/tombigel/detect-zoom的脚本。此外，我们还动态创建了一个 svg 元素并检查其 currentScale 属性。它在 Chrome 和可能的大多数浏览器上运行良好。不过，在 FF 上，“仅缩放文本”功能必须关闭。大多数浏览器都支持SVG 。在撰写本文时，已在 IE10、FF19 和 Chrome28 上进行了测试。

var svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
svg.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
svg.setAttribute('version', '1.1');
document.body.appendChild(svg);
var z = svg.currentScale;
... more code ...
document.body.removeChild(svg);

score 12 · Accepted Answer

我发现这篇文章非常有帮助。非常感谢 yonran。我想传递一些我在实施他提供的一些技术时发现的额外知识。在 FF6 和 Chrome 9 中，添加了对来自 JS 的媒体查询的支持，这可以大大简化确定 FF 放大所需的媒体查询方法。在此处查看 MDN 的文档。为了我的目的，我只需要检测浏览器是放大还是缩小，我不需要实际的缩放系数。我能够用一行 JavaScript 得到答案：

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

将其与同样是单行代码的 IE8+ 和 Webkit 解决方案结合起来，我只需几行代码就能够检测到大多数浏览器对我们应用程序的缩放。

score 11 · Accepted Answer

11

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

这就是你所需要的。

于 2016-05-09T04:17:36.947 回答

score 7 · Accepted Answer

截至 2016 年 1 月，我有一个解决方案。在 Chrome、Firefox 和 MS Edge 浏览器中测试工作。

原理如下。收集 2 个相距较远的 MouseEvent 点。每个鼠标事件都带有屏幕和文档坐标。测量两个坐标系中两点之间的距离。尽管由于浏览器的原因，坐标系之间存在可变的固定偏移，但如果页面不缩放，点之间的距离应该相同。指定“相距很远”（我将其设为 12 像素）的原因是可以检测到小的缩放变化（例如 90% 或 110%）。

参考： https ://developer.mozilla.org/en/docs/Web/Events/mousemove

脚步：

添加鼠标移动监听器

window.addEventListener("mousemove", function(event) {
    // handle event
});

从鼠标事件中捕获 4 个测量值：

event.clientX, event.clientY, event.screenX, event.screenY

测量客户端系统中两点之间的距离 d_c
测量屏幕系统中2点之间的距离d_s
如果 d_c != d_s 则应用缩放。两者之间的差异告诉您缩放量。

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

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

score 6 · Accepted Answer

您可以使用Visual Viewport API：

window.visualViewport.scale;

它是标准的，适用于桌面和移动设备：浏览器支持。

score 4 · Accepted Answer

我想出的是：

1)position:fixed <div>使用width:100%( id=zoomdiv )

2）页面加载时：

zoomlevel=$("#zoomdiv").width()*1.0 / screen.availWidth

它适用于我ctrl+和ctrl-缩放。

或者我可以将线添加到$(window).onresize()事件中以获取活动缩放级别

代码：

<script>
    var zoom=$("#zoomdiv").width()*1.0 / screen.availWidth;

    $(window).resize(function(){
        zoom=$("#zoomdiv").width()*1.0 / screen.availWidth;
        alert(zoom);    
    });
</script>
<body>
    <div id=zoomdiv style="width:100%;position:fixed;"></div>
</body>

PS：这是我的第一篇文章，如有错误请见谅

score 4 · Accepted Answer

基本上，我们有：

window.devicePixelRatio它考虑了浏览器级别的缩放*以及系统缩放/像素密度。
* — 在 Mac/Safari 上不考虑缩放级别
媒体查询
vw/ vhCSS 单位
resize缩放级别更改时触发的事件，导致窗口的有效大小发生更改

对于普通的用户体验来说，这应该足够了。如果您需要检测可能是不良 UI 设计的标志的缩放级别。

Pitch-zoom 更难追踪，目前不考虑。

score 3 · Accepted Answer

在 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 中不存在缩放，因此无需检查缩放。

score 3 · Accepted Answer

这在基于 webkit 的浏览器（Chrome、Safari）中对我来说非常有用：

function isZoomed() {
    var width, mediaQuery;

    width = document.body.clientWidth;
    mediaQuery = '(max-width: ' + width + 'px) and (min-width: ' + width + 'px)';

    return !window.matchMedia(mediaQuery).matches;
}

不过似乎在 Firefox 中不起作用。

这也适用于 WebKit：

var zoomLevel = document.width / document.body.clientWidth;

score 2 · Accepted Answer

在 Chrome 上

var ratio = (screen.availWidth / document.documentElement.clientWidth);
var zoomLevel = Number(ratio.toFixed(1).replace(".", "") + "0");

score 1 · Accepted Answer

在移动设备上（使用 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）。

score 1 · Accepted Answer

1

试试这个

alert(Math.round(window.devicePixelRatio * 100));

于 2020-08-26T11:17:22.660 回答

score 0 · Accepted Answer

您的计算仍然基于许多 CSS 像素。它们现在只是屏幕上的不同尺寸。这就是整页缩放的重点。

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

score 0 · Accepted Answer

没有为 IE 测试这个，但是如果你elem用

min-width: 100%

然后

window.document.width / elem.clientWidth

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

score 0 · Accepted Answer

这是针对Chrome的，在user800583回答之后...

我在这个问题上花了几个小时并没有找到更好的方法，但是：

有 16 个“缩放级别”而不是 10 个
当 Chrome 全屏/最大化时，比率为window.outerWidth/window.innerWidth，而不是时，比率似乎为(window.outerWidth-16)/window.innerWidth，但是第一种情况可以接近第二种情况。

所以我来到了以下......

但是这种方法有局限性：例如，如果您使用应用程序窗口播放手风琴（快速放大和缩小窗口的宽度），那么您将在缩放级别之间获得间隙，尽管缩放没有改变（可能是 outerWidth 和 innerWidth 不是完全在同一时间更新）。

var snap = function (r, snaps)
{
    var i;
    for (i=0; i < 16; i++) { if ( r < snaps[i] ) return i; }
};
var w, l, r;
w = window.outerWidth, l = window.innerWidth;
return snap((w - 16) / l,
            [ 0.29, 0.42, 0.58, 0.71, 0.83, 0.95, 1.05, 1.18, 1.38, 1.63, 1.88, 2.25, 2.75, 3.5, 4.5, 100 ],
);

如果你想要这个因素：

var snap = function (r, snaps, ratios)
{
    var i;
    for (i=0; i < 16; i++) { if ( r < snaps[i] ) return eval(ratios[i]); }
};
var w, l, r;
w = window.outerWidth, l = window.innerWidth;
return snap((w - 16) / l,
            [ 0.29, 0.42, 0.58, 0.71, 0.83, 0.95, 1.05, 1.18, 1.38, 1.63, 1.88, 2.25, 2.75, 3.5, 4.5, 100 ],
            [ 0.25, '1/3', 0.5, '2/3', 0.75, 0.9, 1, 1.1, 1.25, 1.5, 1.75, 2, 2.5, 3, 4, 5 ]
);

score 0 · Accepted Answer

我有这个仅适用于移动设备的解决方案（使用 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());

});

如果您希望在捏合移动后立即缩放级别，您可能需要设置一点超时，因为渲染延迟（但我不确定，因为我没有测试它）。

score 0 · Accepted Answer

此答案基于有关 devicePixelRatio 在 user1080381 的答案中错误返回的评论。

我发现在使用桌面、Surface Pro 3 和 Surface Pro 4 时，此命令在某些情况下也会错误地返回。

我发现它可以在我的桌面上运行，但是 SP3 和 SP4 给出的数字彼此和桌面不同。

虽然我注意到 SP3 的缩放级别是我预期的 1 倍半。当我查看显示设置时，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 (%) 的缩放。

score 0 · Accepted Answer

它目前是否正常工作，但仍需要通过浏览器分隔。在 Chrome(75) 和 Safari(11.1) 上成功测试（目前还没有找到 FF 的方法）。它还在视网膜显示上获得正确的缩放值，并在调整大小事件时触发计算。

    private pixelRatio() {
      const styleString = "(min-resolution: 2dppx), (-webkit-min-device-pixel-ratio: 1.5),(-moz-min-device-pixel-ratio: 1.5),(min-device-pixel-ratio: 1.5)";
      const chromeRatio = (Math.round((this.window.outerWidth / this.window.innerWidth)*100) / 100);
      const otherRatio = (Math.round(window.devicePixelRatio * 100) / 100);
      const resizeValue = (this.isChrome()) ? chromeRatio : otherRatio;

      return resizeValue || (this.window.matchMedia && this.window.matchMedia(styleString).matches ? 2 : 1) || 1;
    }


  private isChrome():boolean {
    return (!!this.window.chrome && !(!!this.window.opera || this.window.navigator.userAgent.indexOf(' Opera') >= 0))
  }

  private chrome() {
    const zoomChrome = Math.round(((this.window.outerWidth) / this.window.innerWidth)*100) / 100;
    return {
      zoom: zoomChrome,
      devicePxPerCssPx: zoomChrome1 * this.pixelRatio()
    };
  }

score 0 · Accepted Answer

这检测规模。

html代码：

<body id="blog">

js：

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

缩放系数和比例不要相互混淆。用户控制“缩放”；“缩放”是一个 CSS 转换。然而，11 年零 10 个月前，understack指出：

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

这是这样做的。我将它与@media 查询结合使用以检测 JavaScript 设备缩放，即 360x720 可能应用 0.5 缩放；720x360，0.75。

var d=document;

score 0 · Accepted Answer

我使用了另一种方法，我创建了一个固定高度和宽度为 100 像素、位置固定和不透明度为 0 的 dom 元素，基本上是一个隐藏元素。

然后我使用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; 
    });
  }

score -1 · Accepted Answer

这可能对任何人都有帮助，也可能对任何人没有帮助，但是无论我尝试什么 Css 技巧，我都有一个页面无法正确居中，所以我编写了一个 JQuery 文件调用中心页面：

问题出现在浏览器的缩放级别上，页面会根据您是 100%、125%、150% 等而发生变化。

下面的代码位于名为 centerpage.js 的 JQuery 文件中。

从我的页面我必须链接到 JQuery 和这个文件才能让它工作，即使我的母版页已经有一个到 JQuery 的链接。

<title>Home Page.</title>
<script src="Scripts/jquery-1.7.1.min.js"></script>
<script src="Scripts/centerpage.js"></script>

centerpage.js：

// centering page element
function centerPage() {
    // get body element
    var body = document.body;

    // if the body element exists
    if (body != null) {
        // get the clientWidth
        var clientWidth = body.clientWidth;

        // request data for centering
        var windowWidth = document.documentElement.clientWidth;
        var left = (windowWidth - bodyWidth) / 2;

        // this is a hack, but it works for me a better method is to determine the 
        // scale but for now it works for my needs
        if (left > 84) {
            // the zoom level is most likely around 150 or higher
            $('#MainBody').removeClass('body').addClass('body150');
        } else if (left < 100) {
            // the zoom level is most likely around 110 - 140
            $('#MainBody').removeClass('body').addClass('body125');
        }
    }
}


// CONTROLLING EVENTS IN jQuery
$(document).ready(function() {
    // center the page
    centerPage();
});

另外，如果您想使面板居中：

// centering panel
function centerPanel($panelControl) {
    // if the panel control exists
    if ($panelControl && $panelControl.length) {
        // request data for centering
        var windowWidth = document.documentElement.clientWidth;
        var windowHeight = document.documentElement.clientHeight;
        var panelHeight = $panelControl.height();
        var panelWidth = $panelControl.width();

        // centering
        $panelControl.css({
            'position': 'absolute',
            'top': (windowHeight - panelHeight) / 2,
            'left': (windowWidth - panelWidth) / 2
        });

        // only need force for IE6
        $('#backgroundPanel').css('height', windowHeight);
    }
}

score -1 · Accepted Answer

这是很久以前发布的问题，但是今天当我在寻找相同的答案“如何检测放大和缩小事件”时，我找不到适合所有浏览器的答案。

现在：对于 Firefox/Chrome/IE8 和 IE9 ，放大和缩小会触发 window.resize 事件。这可以使用以下方法捕获：

$(window).resize(function() {
//YOUR CODE.
});

score -1 · Accepted Answer

FireFox 16+ 纯粹使用 JavaScript 查找 DPPX（缩放级别）的解决方法：

var dppx = (function (precision) {
  var searchDPPX = function(level, min, divisor) {
    var wmq = window.matchMedia;
    while (level >= min && !wmq("(min-resolution: " + (level/divisor) + "dppx)").matches) {
      level--;
    }
    return level;
  };

  var maxDPPX = 5.0; // Firefox 22 has 3.0 as maximum, but testing a bit greater values does not cost much
  var minDPPX = 0.1; // Firefox 22 has 0.3 as minimum, but testing a bit smaller values does not cost anything
  var divisor = 1;
  var result;
  for (var i = 0; i < precision; i++) {
    result = 10 * searchDPPX (maxDPPX, minDPPX, divisor);
    maxDPPX = result + 9;
    minDPPX = result;
    divisor *= 10;
  }

  return result / divisor;
}) (5);

score -1 · Accepted Answer

问题在于使用的显示器类型，4k 显示器与标准显示器。Chrome 是迄今为止最聪明的，它能够告诉我们缩放级别是多少window.devicePixelRatio，显然它可以告诉我们像素密度是多少，并报告相同的数字。

其他浏览器，没有那么多。IE 和 Edge 可能是最差的，因为它们处理缩放级别的方式大不相同。要在 4k 显示器上获得相同大小的文本，您必须选择 200%，而不是在标准显示器上选择 100%。

截至 2018 年 5 月，我必须为一些最流行的浏览器（Chrome、Firefox 和 IE11）检测缩放级别。我有它告诉我缩放百分比是多少。对于 IE，即使 4k 显示器实际上是 200%，它也会报告 100%，但文本大小实际上是相同的。

这是一个小提琴：https ://jsfiddle.net/ae1hdogr/

如果有人愿意尝试其他浏览器并更新小提琴，那么请这样做。我的主要目标是覆盖这 3 个浏览器，以检测人们是否使用大于 100% 的缩放系数来使用我的 Web 应用程序，并显示提示出租缩放系数的通知。

score -2 · Accepted Answer

在这里它不会改变！：

<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）

score -3 · Accepted Answer

function supportFullCss3()
{
    var div = document.createElement("div");
    div.style.display = 'flex';
    var s1 = div.style.display == 'flex';
    var s2 = 'perspective' in div.style;

    return (s1 && s2);
};

function getZoomLevel()
{
    var screenPixelRatio = 0, zoomLevel = 0;

    if(window.devicePixelRatio && supportFullCss3())
        screenPixelRatio = window.devicePixelRatio;
    else if(window.screenX == '0')
        screenPixelRatio = (window.outerWidth - 8) / window.innerWidth;
    else
    {
        var scr = window.frames.screen;
        screenPixelRatio = scr.deviceXDPI / scr.systemXDPI;
    }

    //---------------------------------------
    if (screenPixelRatio <= .11){ //screenPixelRatio >= .01 &&
      zoomLevel = "-7";
    } else if (screenPixelRatio <= .25) {
      zoomLevel = "-6";
    }else if (screenPixelRatio <= .33) {
      zoomLevel = "-5.5";
    } else if (screenPixelRatio <= .40) {
      zoomLevel = "-5";
    } else if (screenPixelRatio <= .50) {
      zoomLevel = "-4";
    } else if (screenPixelRatio <= .67) {
      zoomLevel = "-3";
    } else if (screenPixelRatio <= .75) {
      zoomLevel = "-2";
    } else if (screenPixelRatio <= .85) {
      zoomLevel = "-1.5";
    } else if (screenPixelRatio <= .98) {
      zoomLevel = "-1";
    } else if (screenPixelRatio <= 1.03) {
      zoomLevel = "0";
    } else if (screenPixelRatio <= 1.12) {
      zoomLevel = "1";
    } else if (screenPixelRatio <= 1.2) {
      zoomLevel = "1.5";
    } else if (screenPixelRatio <= 1.3) {
      zoomLevel = "2";
    } else if (screenPixelRatio <= 1.4) {
      zoomLevel = "2.5";
    } else if (screenPixelRatio <= 1.5) {
      zoomLevel = "3";
    } else if (screenPixelRatio <= 1.6) {
      zoomLevel = "3.3";
    } else if (screenPixelRatio <= 1.7) {
      zoomLevel = "3.7";
    } else if (screenPixelRatio <= 1.8) {
      zoomLevel = "4";
    } else if (screenPixelRatio <= 1.9) {
      zoomLevel = "4.5";
    } else if (screenPixelRatio <= 2) {
      zoomLevel = "5";
    } else if (screenPixelRatio <= 2.1) {
      zoomLevel = "5.2";
    } else if (screenPixelRatio <= 2.2) {
      zoomLevel = "5.4";
    } else if (screenPixelRatio <= 2.3) {
      zoomLevel = "5.6";
    } else if (screenPixelRatio <= 2.4) {
      zoomLevel = "5.8";
    } else if (screenPixelRatio <= 2.5) {
      zoomLevel = "6";
    } else if (screenPixelRatio <= 2.6) {
      zoomLevel = "6.2";
    } else if (screenPixelRatio <= 2.7) {
      zoomLevel = "6.4";
    } else if (screenPixelRatio <= 2.8) {
      zoomLevel = "6.6";
    } else if (screenPixelRatio <= 2.9) {
      zoomLevel = "6.8";
    } else if (screenPixelRatio <= 3) {
      zoomLevel = "7";
    } else if (screenPixelRatio <= 3.1) {
      zoomLevel = "7.1";
    } else if (screenPixelRatio <= 3.2) {
      zoomLevel = "7.2";
    } else if (screenPixelRatio <= 3.3) {
      zoomLevel = "7.3";
    } else if (screenPixelRatio <= 3.4) {
      zoomLevel = "7.4";
    } else if (screenPixelRatio <= 3.5) {
      zoomLevel = "7.5";
    } else if (screenPixelRatio <= 3.6) {
      zoomLevel = "7.6";
    } else if (screenPixelRatio <= 3.7) {
      zoomLevel = "7.7";
    } else if (screenPixelRatio <= 3.8) {
      zoomLevel = "7.8";
    } else if (screenPixelRatio <= 3.9) {
      zoomLevel = "7.9";
    } else if (screenPixelRatio <= 4) {
      zoomLevel = "8";
    } else if (screenPixelRatio <= 4.1) {
      zoomLevel = "8.1";
    } else if (screenPixelRatio <= 4.2) {
      zoomLevel = "8.2";
    } else if (screenPixelRatio <= 4.3) {
      zoomLevel = "8.3";
    } else if (screenPixelRatio <= 4.4) {
      zoomLevel = "8.4";
    } else if (screenPixelRatio <= 4.5) {
      zoomLevel = "8.5";
    } else if (screenPixelRatio <= 4.6) {
      zoomLevel = "8.6";
    } else if (screenPixelRatio <= 4.7) {
      zoomLevel = "8.7";
    } else if (screenPixelRatio <= 4.8) {
      zoomLevel = "8.8";
    } else if (screenPixelRatio <= 4.9) {
      zoomLevel = "8.9";
    } else if (screenPixelRatio <= 5) {
      zoomLevel = "9";
    }else {
      zoomLevel = "unknown";
    }

    return zoomLevel;
};

javascript - 如何检测所有现代浏览器中的页面缩放级别？

29 回答 29

Related

Reference