当视口未调整大小时，jquery $(window).width() 和 $(window).height() 返回不同的值
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2596594/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jquery $(window).width() and $(window).height() return different values when viewport has not been resized
提问by Manca Weeks
I am writing a site using jquery that repeatedly calls $(window).width()and $(window).height()to position and size elements based on the viewport size.
我正在使用 jquery 编写一个站点，该站点重复调用$(window).width()并$(window).height()根据视口大小来定位和调整元素的大小。
In troubleshooting I discovered that I am getting slightly different viewport size reports in repeated calls to the above jquery functions when the viewport is not resized.
在故障排除中，我发现当视口未调整大小时，在重复调用上述 jquery 函数时，我得到的视口大小报告略有不同。
Wondering if there is any special case anyone knows of when this happens, or if this is just the way it is. The difference in sizes reported are 20px or less, it appears. It happens in Safari 4.0.4, Firefox 3.6.2 and Chrome 5.0.342.7 beta on Mac OS X 10.6.2. I didn't test other browsers yet because it doesn't appear to be specific to the browser. I was also unable to figure out what the difference depends upon, if it isn't the viewport size, could there be another factor that makes the results differ?
想知道是否有任何特殊情况有人知道这种情况何时发生，或者是否就是这样。报告的大小差异似乎是 20px 或更小。它发生在 Mac OS X 10.6.2 上的 Safari 4.0.4、Firefox 3.6.2 和 Chrome 5.0.342.7 beta 中。我还没有测试其他浏览器，因为它似乎不是特定于浏览器的。我也无法弄清楚差异取决于什么，如果不是视口大小，是否还有另一个因素导致结果不同？
Any insight would be appreciated.
任何见解将不胜感激。
update:
更新：
It is not the values of $(window).width()and $(window).height()that are changing. It's the values of the variables I am using to store the values of the above.
这不是值$(window).width()，并$(window).height()正在改变。这是我用来存储上述值的变量的值。
It is not scrollbars that are afecting the values, no scrollbars appear when the variable values change. Here is my code to store the values in my variables (which I am doing just so they are shorter).
影响值的不是滚动条，变量值更改时不会出现滚动条。这是我将值存储在我的变量中的代码（我这样做只是为了让它们更短）。
(all this is within $(document).ready())
（这一切都在$(document).ready()）
//initially declare the variables to be visible to otehr functions within .ready()
// 最初声明变量对其中的 otehr 函数可见 .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()
I inserted an alert statement to probe the variables above against the values they are supposed to be holding. The $(item).param()values stay consistent, but my variables change for reasons I can't figure out.
我插入了一个警报语句来根据它们应该持有的值来探测上面的变量。该$(item).param()值保持一致，但我的变量发生变化的原因，我想不通。
I have looked for places where my code might be altering the value of the variables in question, as opposed to just retrieving their set values and can find none. I can post the whole shebang somewhere if that's a possibility.
我一直在寻找我的代码可能会改变相关变量值的地方，而不是仅仅检索它们的设置值而找不到任何值。如果可能的话，我可以在某处发布整个shebang。
采纳答案by Nick Craver
I think what you're seeing is the hiding and showing of scrollbars. Here's a quick demo showing the width change.
我认为您看到的是滚动条的隐藏和显示。 这是一个显示宽度变化的快速演示。
As an aside: do you need to poll constantly? You might be able to optimize your code to run on the resize event, like this:
顺便说一句：您是否需要不断轮询？您可以优化代码以在 resize 事件上运行，如下所示：
$(window).resize(function() {
//update stuff
});
回答by Albi Patozi
Try to use a
尝试使用
$(window).loadevent
$(window).load事件
or
或者
$(document).readybecause the initial values may be inconstant because of changes that occur during the parsing or during the DOM load.
$(document).ready因为初始值可能会因为解析或 DOM 加载期间发生的变化而不稳定。
回答by xixixao
Note that if the problem is being caused by appearing scrollbars, putting
请注意，如果问题是由出现滚动条引起的，则将
body {
overflow: hidden;
}
in your CSS might be an easy fix (if you don't need the page to scroll).
在您的 CSS 中可能是一个简单的修复（如果您不需要页面滚动）。
回答by Jared
I was having a very similar problem. I was getting inconsistent height() values when I refreshed my page. (It wasn't my variable causing the problem, it was the actual height value.)
我遇到了非常相似的问题。刷新页面时，我得到了不一致的 height() 值。（这不是我的变量导致问题，而是实际的高度值。）
I noticed that in the head of my page I called my scripts first, then my css file. I switched so that the css file is linked first, then the script files and that seems to have fixed the problem so far.
我注意到在我的页面的头部我首先调用了我的脚本，然后是我的 css 文件。我切换到先链接 css 文件，然后链接脚本文件，到目前为止似乎已经解决了这个问题。
Hope that helps.
希望有帮助。
