如何通过编程确定浏览器窗口的当前缩放级别？

Question

我想通过访问JavaScript的窗口对象属性，找出在浏览器窗口中显示的缩放级别。但是，我似乎找不到基于内部宽度、页面偏移等因素的正确数学公式来计算缩放级别。我找到了一个解决方案，但它使用了document.body.getBoundingClientRect调用，在我的情况下没有返回任何内容，而我也无法确定是否有适合的替代方法来从窗口属性中获取信息。我正在使用Safari浏览器。

- Mihai Fonoage

Answer 1

您可以通过比较以下各种属性来确定缩放级别，具体取决于您的浏览器：

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

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

- John Feminella

---

如果我使用document.documentElement.clientWidth和document.defaultView.getComputedStyle(document.documentElement, null).width，无论缩放比例如何，我始终会得到相同的值（920和2080）。 - Mihai Fonoage

这样说zoom = window.pageYOffset/window.innerHeight * 100有意义吗？ - Mihai Fonoage

嗯...这在Chrome上似乎对我有效，而且我认为它在Safari上也可以工作，因为它也使用Webkit，但版本差异可能会产生影响。 - John Feminella

@John Feminella ff 怎么样？ - GC_

在Chrome上对我不起作用。 - Aayush Kumar

Answer 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); 
}

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

- user761574