jQuery（窗口）.height不准确

时间：2013-08-12 02:24:12

标签： jquery

我正在对$（window）.height（）做一个简单的测试，我的屏幕分辨率为1366 x 768，我的值为2602。

jQuery(document).ready(function($){

    var W = $(window).width();
    var H = $(window).height();

    console.log('W ' + W);
    console.log('H ' + H);

}

输出：

  W 1226   H 2602

有关如何调试此错误或我做错了什么的提示？

编辑：使用chrome和FF

我在控制台中输入：jQuery（window）.height（）;

6 个答案:

答案 0 :(得分：9)

这可能就像缺少或不正确的DOCTYPE（受影响的Chrome但不是IE）一样简单。

有趣的是，这甚至不是jQuery问题 - 它也会影响document.documentElement.clientHeight。

没有doctype：

enter image description here

使用doctype： 

<!DOCTYPE html>

enter image description here

我以为我的页面上有一个布局模板，但事实证明我没有 - 因此没有DOCTYPE。

答案 1 :(得分：5)

你做的一切都是正确的，而你却没有得到应有的价值。这不是jQuery应该如何表现的。

在这个页面中，我测试了你正在调用的函数，看看它们的值是什么。它们确实准确地表示了我窗口中可见页面的实际宽度和高度。这是结果。

Chrome，使用标准开发控制台

Some calls to the window width and height in jQuery, returning correct results for pixels on screen

Firefox，使用Firebug

Some calls to the window width and height in jQuery, returning correct results for pixels on screen

你的结局是非常错的

jQuery的$(window).height()应该显示可见的视口。请参阅jQuery's height function上的文档：

  

此方法还可以找到窗口和文档的高度。

$(window).height(); // returns height of browser viewport
$(document).height(); // returns height of HTML document

window.height是可以干扰的可设置值，但$(window).height()不会受到更改的影响。

究竟出了什么问题？

无论发生什么，无论你调用什么函数，你都不会调用jQuery的$(window).height()实现。

使用浏览器的开发者控制台，在您调用$(window).height()的行上放置一个断点，然后进入函数调用。当您致电$(window).height()时，实际被叫什么？你需要找到它。

是否有人用新的或更好的高度函数替换了高度函数？

对我的强烈怀疑是你正在使用的代码库的某些部分已经完成了这个：

// Replace jQuery's height function with a better one to fix bug XYZ
$(window).height = function brandNewHeightFunction() {
    return someVeryWrongValue;
};

如果是这样，当你进入高度函数时，它实际上可能不进入jQuery库的一部分，而是你自己的库的另一部分。找出必要的东西，看看你能做些什么。如果您只是删除此功能，其他依赖于此工作的东西可能会开始破坏。

有人离开并修改/自定义了您的jQuery库吗？

检查是否发生了这种情况，无论你能做什么，以及你有哪些历史工具。你使用的是什么版本的jQuery？如果可能的话，从jQuery网站下载相同的代码，看看当你进入窗口高度函数时看到的代码与你在那里看到的相同。

重新下载jQuery并引用它。如果你的窗户高度功能突然开始工作，有人可能已经这样做了。找出为什么这是定制的。如果你修复它，取决于这种行为的其他东西可能会开始破坏。

答案 2 :(得分：1)

实际上，这是我页面上隐藏的div元素的结果。我有一个厚盒链接，可以提取这个隐藏的内容。删除它修复了jQuery.width（）！

令人惊讶，不确定是否有帮助，但确实是答案。

答案 3 :(得分：1)

这里的问题相同，看起来jquery（和dom一般）在quirksmode中没有正确计算大小。

两种解决方案：

  1. 在页面顶部添加doctype html，或
  2. 如果第一个选项不是选项，请使用window.innerHeight，window.innerWidth。

    3. 希望它有所帮助。

答案 4 :(得分：0)

根据我的经验，$(document).height();通常是您在大多数情况下所需的。不同之处在于，如果页面大于窗口（具有滚动条），您将获得整个可滚动文档的完整高度，而$(window).height()只能获得当前大小的选项卡的高度。

因此，如果你想要一个元素占据窗口的全部大小+下面的任何可滚动区域$(document).height是可行的方法。

但两者肯定有一个用例。

答案 5 :(得分：-1)

jquery使用clientWidth和height返回当前显示页面的值，不包括滚动条空间有一种方法可以使其准确溢出：隐藏到您的body标签然后您将获得原始视口大小

相关问题
最新问题