javascript-視口大小不正確

Question

我嘗試獲取瀏覽器視口的大小。

當頁面最初加載時（在jQuery(function() { .. });) ，這兩個頁面都顯示正確的值（例如：560）：

console.log($(window).height());
console.log(document.documentElement.clientHeight);

但是后來當我做同樣的事情時，它顯示了整個文檔的高度（例如：11675）。

有很多HTML和JS，要弄清楚是怎么回事，我只是想知道，有沒有人看到這樣的東西，如果是這樣，是什么原因導致的？如何獲得正確的視口大小？ 所有的Google匹配都顯示這是獲取值的正確方法。

注意：我使用的是chrome。

Answer 1

我最近在一個項目中遇到了同樣的問題。 我沒有時間去挖掘和隔離這個奇怪的錯誤，我最終使用了此功能（根據此答案改編）來正確獲取視口尺寸：

var getViewportSize = (function(){
        var w = window,
            d = document,
            e = d.documentElement,
            g = d.getElementsByTagName('body')[0];

        return function(){
            return {
                w : Math.max(w.innerWidth || e.clientWidth || g.clientWidth, app.config.minWidth),
                h : Math.max(w.innerHeight|| e.clientHeight|| g.clientHeight, app.config.minHeight)
            };
        }
    })();

根據我的測試，當控制台或其他瀏覽器擴展/工具欄占用某些視口空間時，jQuery返回了不正確的大小。
希望這會有所幫助，但是我也很好奇並且試圖弄清楚這一點，因為很難認為成熟的庫（例如jQuery 2.0）具有此類錯誤。