2

適切なズーム値を計算するために、IE でドキュメントを含むウィンドウの実際のピクセル clientWidth が必要ですが、ウィンドウが常に値 0 を返すことがわかりました。DOM オブジェクトからこの値を取得する方法はありますか? 私は JS 初心者ですが、ズームが 100% である限り document.body.clientWidth が機能することを発見しましたが、それ以外の場合はズームされたピクセル値を返します。ヘルプ？

4

1 に答える 1

2

バージョン 8 より前の Internet Explorer では、幅を物理ピクセル サイズで取得しますが、バージョン 8 以降では、幅を論理ピクセル サイズで返します。

どういう意味ですか？

ブラウザーが通常のズーム レベルでない場合 (ユーザーは Web ページをズームインまたはズームアウトすることができます: CTRL と +、CTRL と -)、clientWidth プロパティはバージョン 8 と以前のバージョンの動作が異なります。

  • バージョン 8 より前の Internet Explorer では、ドキュメントの現在のピクセル サイズが異なっていても、幅は既定のピクセル サイズで計算されます。
  • Internet Explorer 8 以降、および Firefox、Opera、Google Chrome、および Safari では、幅は現在のピクセル サイズで計算されます。

たとえば、ズーム レベルが 200% の場合、clientWidth プロパティは、同じクライアント ウィンドウ サイズに対して、バージョン 8 以降よりもバージョン 8 より前の方が 2 倍大きい値を取得します。

ブラウザー ウィンドウのサイズを取得するためのクロスブラウザー ソリューションの場合:

<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 に答える