Question

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

Answer 1

您可以根据浏览器将各种属性与document.documentElement.clientWidth进行比较来确定缩放级别：

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

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

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

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

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

2 个答案: