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

Question

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

在故障排除中，我发现当视口(viewport)未调整大小时，重复调用上述 jquery 函数时，我得到的视口(viewport)大小报告略有不同。

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

如有任何见解，我们将不胜感激。

---

更新:

改变的不是$(window).width() 和$(window).height() 的值。这是我用来存储上述值的变量的值。

影响值的不是滚动条，变量值更改时不会出现滚动条。这是我的代码，用于将值存储在我的变量中(我这样做只是为了让它们更短)。

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

//初始声明变量对 .ready() 中的其他函数可见

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 .

顺便说一句:你需要不断地轮询吗？您可以优化代码以在调整大小事件上运行，如下所示:

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