Question

我试图获取浏览器视口大小。

当页面最初加载时（在jQuery(function() { .. });)中，这两个都显示正确的值（例如：560）：

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

但后来当我做同样的事情时，它显示了整个博士的高度（例如：11675）。

有很多HTML和JS，需要一段时间来弄清楚发生了什么，我只是想知道，有没有人看到这样的东西，如果有的话，是什么原因造成的，我怎样才能得到正确的尺寸视口？所有谷歌点击都表明这是检索价值的正确方法。

注意：我正在使用chrome。

Answer 1

我最近在我的一个项目中碰到了同样的问题。我没有时间去挖掘和隔离这个奇怪的bug，我最终使用这个函数（改编自this answer）来正确获取视口尺寸：

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返回的大小不正确。
希望这会有所帮助，但我也很好奇，并试图弄清楚这一点，因为很难想象一个成熟的lib如jQuery 2.0有这些错误。

javascript - 视口大小不正确

1 个答案: