2

我需要 IE 中文档包含窗口的实际像素 clientWidth 以计算正确的缩放值，但发现窗口始终返回 0 值。有没有办法从任何 DOM 对象中获取该值？我是一个 JS 菜鸟，发现只要缩放为 100%，document.body.clientWidth 就可以解决问题，否则会返回缩放后的像素值。帮助？

4

1 回答 1

2

在早于版本 8 的 Internet Explorer 中，它以物理像素大小检索宽度，而从版本 8 开始，它以逻辑像素大小返回宽度。

这是什么意思？

如果浏览器未处于正常缩放级别（用户可以放大或缩小网页：CTRL 和 +、CTRL 和 -），clientWidth 属性的工作方式与版本 8 和早期版本不同。

  • 即使文档中的当前像素大小不同，宽度也是在 8 版之前的 Internet Explorer 中以默认像素大小计算的。
  • 从 Internet Explorer 8 和 Firefox、Opera、Google Chrome 和 Safari 开始，宽度以当前像素大小计算。

例如，如果缩放级别为 200%，对于相同的客户端窗口大小，clientWidth 属性在版本 8 之前检索的值是版本 8 的两倍。

对于获取浏览器窗口大小的跨浏览器解决方案：

<head>
    <script type="text/javascript">
        // always return 1, except at non-default zoom levels in IE before version 8
        function GetZoomFactor() {
            var factor = 1;
            if (document.body.getBoundingClientRect) {
                // rect is only in physical pixel size in IE before version 8 
                var rect = document.body.getBoundingClientRect();
                var physicalW = rect.right - rect.left;
                var logicalW = document.body.offsetWidth;
                // the zoom level is always an integer percent value
                factor = Math.round((physicalW / logicalW) * 100) / 100;
            }
            return factor;
        }

        function GetWindowSize() {
            var zoomFactor = GetZoomFactor();
            var w = Math.round(document.documentElement.clientWidth / zoomFactor);
            var h = Math.round(document.documentElement.clientHeight / zoomFactor);
            var info = document.getElementById("info");
            info.innerHTML = w + "px * " + h + "px";
        }
    </script>
</head>
<body onload="GetWindowSize ()">Size of the browser's client area:
<span id="info" style="margin-left:20px;"></span>

    <div
    style="width:500px; height:1000px; background-color:#e0a0a0;">Size of this element: 500px * 1000px</div>
</body>
于 2012-10-02T03:20:20.560 回答