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

关于如何调试这个或我做错了什么的提示?

编辑:使用铬和FF

我在控制台中输入这个:jQuery(window).height();

这可以像丢失或不正确的DOCTYPE一样简单(受影响的Chrome但不是IE)。

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

没有doctype:

在此处输入图像描述

使用doctype:

  

在此处输入图像描述

我以为我的页面上有一个布局模板,但事实certificate我没有 – 因此没有DOCTYPE。

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

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

Chrome,使用标准的Dev控制台

一些调用jQuery中的窗口宽度和高度,返回屏幕上像素的正确结果

Firefox,Firebug

一些调用jQuery中的窗口宽度和高度,返回屏幕上像素的正确结果

你最终会出现问题

jQuery的$(window).height()应该显示可见的视口。 查看有关jQuery高度函数的文档:

此方法还能够找到窗口和文档的高度。

 $(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()实际调用的是什么? 你需要找到它。

有人用新的或更好的高度function取代了身高吗?

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

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

如果是这样,当你进入高度函数时,它实际上可能不会进入jQuery库的一部分,而是进入你自己的库的另一部分。 找出需要它的东西,看看你能做些什么。 如果你只是删除这个function,其他东西取决于它以这种方式工作可能会开始打破。

有人走了,修改/定制了你的jQuery库吗?

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

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

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

令人惊讶,不确定是否有用,但确实是答案。

这里的问题相同,它看起来jquery(和dom一般)在quirksmode中没有正确计算大小。

两种解决方案

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

希望能帮助到你。

根据我的经验, $(document).height(); 通常是大多数情况下你想要的。 区别在于如果页面大于窗口(具有滚动条),您将获得整个可滚动文档的完整高度,而$(window).height()将仅获得当前大小的选项卡的高度。

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

但两者肯定有一个用例。

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