我需要IE中包含文档的窗口的实际像素clientWidth来计算适当的缩放值,但发现该窗口始终返回0值。是否有办法从任何DOM对象获取此值?我是JS菜鸟,发现只要缩放为100%,document.body.clientWidth就能解决问题,但否则会返回缩放的像素值。救命?

最佳答案

在版本8之前的Internet Explorer中,它以物理像素大小检索宽度,而在版本8中,它以逻辑像素大小返回宽度。

这是什么意思?

如果浏览器未处于正常的缩放级别(用户具有放大或缩小网页的能力:CTRL和+,CTRL和-),则clientWidth属性与版本8的工作方式将与早期版本不同。


即使文档中的当前像素大小不同,该宽度也是使用Internet Explorer版本8之前的默认像素大小计算的。
在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>

09-18 08:08