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

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

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

• vs.

  window.outerWidth

  （在Opera上）
• vs.document.defaultView.getComputedStyle（document.documentElement， 空）。宽度（在Safari、Chrome上）
• 或者比较

  screen.deviceXDPI

  和

  screen.logicalXDPI

  （在IE8上）

---

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

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

---

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

如果我使用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上对我不起作用。

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