如何以编程方式确定浏览器窗口的当前缩放级别？ [复制]

Posted 2023-02-21

【中文标题】如何以编程方式确定浏览器窗口的当前缩放级别？ [复制]

【英文标题】：How do I programmatically determine the current zoom level of a browser window? [duplicate]

【发布时间】：2011-02-18 05:14:57

【问题描述】：

我想根据我有权访问的javascripts' window object properties 找出浏览器窗口中显示内容的缩放级别。我似乎无法根据内部宽度、页面偏移量等找到正确的缩放数学公式。我找到了一个解决方案，但它使用了 document.body.getBoundingClientRect 调用，在我的情况下它不会返回任何内容，并且我无法从窗口属性中判断是否有合适的替代品。我正在使用 Safari。

【参考方案1】：

您可以通过将各种属性与document.documentElement.clientWidth 进行比较来确定缩放级别，具体取决于您的浏览器：

对比window.outerWidth（在 Opera 上） 对比document.defaultView.getComputedStyle(document.documentElement, null).width（在 Safari、Chrome 上） 或比较screen.deviceXDPI 和screen.logicalXDPI（在IE8 上）。

这些值的比率是当前缩放级别（例如，比率为 2 表示缩放为 200%）。

【讨论】：

如果我使用 document.documentElement.clientWidth 和 document.defaultView.getComputedStyle(document.documentElement, null).width，无论缩放如何，我总是得到相同的值（920 和 2080）。跨度>

说zoom = window.pageYOffset/window.innerHeight * 100有意义吗？

嗯.. 这似乎适用于我的 Chrome，我认为它也适用于 Safari，因为它也使用 Webkit，但版本差异可能会在这里发挥作用。

@John Feminella ff 呢？

在 Chrome 上不适合我。

【参考方案2】：

这是一个粗略的估计方法，它通过查看窗口的内部宽度和可用宽度（有和没有滚动条）之间的差异来确定缩放比例，并将其与滚动条宽度应为 100% 的比例进行比较。它目前依赖于 jquery，应该做更多的工作来确定各种浏览器的确切预期滚动条宽度（目前只使用 15 像素，这似乎是常态）。

function getZoom() 

    var ovflwTmp = $('html').css('overflow');
    $('html').css('overflow','scroll');

    var viewportwidth;  
    // the more standards compliant browsers (mozilla/netscape/opera/IE7) use window.innerWidth and window.innerHeight 
    if (typeof window.innerWidth != 'undefined')  
        viewportwidth = window.innerWidth;
     else if (typeof(document.documentElement) != 'undefined'  && 
        typeof document.documentElement.clientWidth != 'undefined' && 
        document.documentElement.clientWidth != 0) 
        // IE6 in standards compliant mode (i.e. with a valid doctype as the first line in the document) 
        viewportwidth = document.documentElement.clientWidth; 
     else  
        // older versions of IE 
        viewportwidth = document.getElementsByTagName('body')[0].clientWidth; 
    

    var windW = $(window).width();  
    var scrollBarW = viewportwidth - windW; 

    if(!scrollBarW) return 1;

    $('html').css('overflow',ovflwTmp);

    return  (15 / scrollBarW); 

虽然这并不完美，但这是迄今为止我能想到的最好的。我目前正在使用它来知道何时提供高分辨率图像，如果用户已缩放到使它们模糊的程度。