106

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

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

想知道是否有任何人知道何时发生这种情况的特殊情况，或者这就是这种情况。报告的大小差异为 20 像素或更少，它似乎。它发生在 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()

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 发布到某个地方。

4

4 回答 4

98

我认为您看到的是滚动条的隐藏和显示。 这是一个显示宽度变化的快速演示。

顺便说一句：你需要经常投票吗？您也许可以优化代码以在调整大小事件上运行，如下所示：

$(window).resize(function() {
  //update stuff
});
于 2010-04-07T23:38:12.490 回答
9

尝试使用一个

  • $(window).load事件

或者

  • $(document).ready

    因为初始值可能会因为解析期间或 DOM 加载期间发生的变化而变化。

于 2012-09-18T21:21:02.327 回答
3

请注意，如果问题是由出现滚动条引起的，请将

body {
  overflow: hidden;
}

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

于 2013-04-15T18:05:04.410 回答
1

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

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

希望有帮助。

于 2010-07-20T19:43:41.653 回答