Question

我正在使用jquery编写一个网站，该网站反复调用$(window).width()和$(window).height()根据视口大小定位和调整元素。

在进行故障排除时，我发现在未调整视口大小时，在重复调用上述jquery函数时，我的视口大小报告略有不同。

想知道是否有任何特殊情况，任何人都知道这种情况何时发生，或者这是否就是这样。显示的尺寸差异为20px或更小。它发生在Mac OS X 10.6.2上的Safari 4.0.4，Firefox 3.6.2和Chrome 5.0.342.7 beta中。我还没有测试其他浏览器，因为它似乎并不特定于浏览器。我也无法弄清楚差异取决于什么，如果它不是视口大小，是否还有另一个因素会导致结果不同？

任何见解都将受到赞赏。

更新

$(window).width()和$(window).height()的值不是正在发生变化。这是我用来存储上述值的变量的值。

不是滚动条会影响值，变量值更改时不会显示滚动条。这是我的代码，用于将值存储在我的变量中（我正在这样做，因此它们更短）。

（所有这些都在$(document).ready()）

之内

//最初声明变量对.ready()

中的otehr函数可见

var windowWidth = $(window).width(); //retrieve current window width
var windowHeight = $(window).height(); //retrieve current window height
var documentWidth = $(document).width(); //retrieve current document width
var documentHeight = $(document).height(); //retrieve current document height
var vScrollPosition = $(document).scrollTop(); //retrieve the document scroll ToP position
var hScrollPosition = $(document).scrollLeft(); //retrieve the document scroll Left position


function onm_window_parameters(){ //called on viewer reload, screen resize or scroll

    windowWidth = $(window).width(); //retrieve current window width
    windowHeight = $(window).height(); //retrieve current window height
    documentWidth = $(document).width(); //retrieve current document width
    documentHeight = $(document).height(); //retrieve current document height
    vScrollPosition = $(document).scrollTop(); //retrieve the document scroll ToP position
    hScrollPosition = $(document).scrollLeft(); //retrieve the document scroll Left position

}; //end function onm_window_parameters()

我插入了一个警告语句来探测上面的变量与它们应该持有的值。 $(item).param()值保持一致，但我的变量因我无法理解的原因而发生变化。

我已经找到了我的代码可能会改变相关变量值的地方，而不是只检索它们的设置值而不能找到它们。如果可能的话，我可以将整个shebang发布到某个地方。

Answer 1

我认为你所看到的是隐藏和显示滚动条。 Here's a quick demo showing the width change

顺便说一下：你需要经常轮询吗？您可以优化代码以在resize事件上运行，如下所示：

$(window).resize(function() {
  //update stuff
});

Answer 2

尝试使用

$(window).load活动

或

$(document).ready

因为在解析期间或在DOM加载期间发生的更改，初始值可能是不稳定的。

Answer 3

请注意，如果问题是由显示滚动条引起的，请输入

body {
  overflow: hidden;
}

CSS中的

可能是一个简单的修复（如果你不需要页面滚动）。

Answer 4

我遇到了一个非常类似的问题。当我刷新页面时，我得到了不一致的height（）值。（这不是导致问题的变量，而是实际的高度值。）

我注意到在页面的头部我首先调用了我的脚本，然后调用了我的css文件。我切换，以便首先链接css文件，然后脚本文件，这似乎已解决了目前为止的问题。

希望有所帮助。

jquery $（window）.width（）和$（window）.height（）在视口未调整大小时返回不同的值

4 个答案: