当视口尚未调整大小时，jQuery $(window).width()和$(window).height()返回不同的值 [英] jquery $(window).width() and $(window).height() return different values when viewport has not been resized

问题描述

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

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函数会得到视口大小报告略有不同.

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.

想知道是否有任何特殊情况是什么时候知道的，或者这仅仅是事实.出现的报告大小差异为20px或更小.它发生在Mac OS X 10.6.2上的Safari 4.0.4，Firefox 3.6.2和Chrome 5.0.342.7 beta中.我尚未测试其他浏览器，因为它似乎并不是特定于该浏览器的.我也无法弄清差异取决于什么，如果不是视口大小，是否还有其他因素会使结果有所不同?

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?

任何见识都会受到赞赏.

Any insight would be appreciated.

更新:

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

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.

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

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).

(所有这些都在$(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()值保持一致，但由于无法弄清的原因，我的变量发生了变化.

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.

我一直在寻找我的代码可能正在更改相关变量的值的地方，而不是仅仅检索它们的设置值而找不到任何地方.如果可能的话，我可以将整个shebang发布到某个地方.

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.

推荐答案

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

I think what you're seeing is the hiding and showing of scrollbars. Here's a quick demo showing the width change.

顺便说一句:您需要不断轮询吗?您也许可以优化代码以在resize事件上运行，如下所示:

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:

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

这篇关于当视口尚未调整大小时，jQuery $(window).width()和$(window).height()返回不同的值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！