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

Posted

技术标签:

【中文标题】jquery $(window).width() 和 $(window).height() 在未调整视口大小时返回不同的值【英文标题】:jquery $(window).width() and $(window).height() return different values when viewport has not been resized 【发布时间】:2011-02-05 11:57:17 【问题描述】:

我正在使用 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 发布到某个地方。

【问题讨论】:

【参考方案1】:

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

顺便说一句:你需要不断地投票吗?您也许可以优化代码以在调整大小事件上运行,如下所示:

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

【讨论】:

顺便说一句,你毕竟是对的......在故障排除时我注意到有滚动条。它们出现得如此短暂,以至于除了在调试模式下脚本在执行过程中暂停外,它们无法被看到。一旦我删除了上述变量和函数,一些元素仍然从位置跳转 - 它与脚本步骤的顺序有关 - 我只需要确保在插入图像之前将保存插入图像的 div 重置为 css left:0 .故事的寓意:滚动条看起来不够长,并不意味着它们不存在! 我也会使用这个问题:***.com/questions/2854407/… 这样您就可以在调整大小事件完成后进行检查,然后再执行任何操作。您的脚本将运行 .resize() 函数中您调整大小的每个像素,因此更好的做法是等待。【参考方案2】:

尝试使用一个

$(window).load事件

$(document).ready

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

【讨论】:

【参考方案3】:

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

body 
  overflow: hidden;

在您的 CSS 中可能很容易解决(如果您不需要页面滚动)。

【讨论】:

【参考方案4】:

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

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

希望对您有所帮助。

【讨论】:

实际上,我最初的问题是,我的元素在页面周围的定位方式导致滚动条出现了几分之一秒 - 足以使测量结果出现偏差,但不足以让眼睛看到抓住它......一旦我在我的javascript语句之间放置警报语句以将代码分解为不同的状态,我就明白了这一点。我这样做是为了让警报报告代码执行的每个阶段的测量结果。就在那时,我注意到其中一种状态导致出现滚动条 - 这恰好是进行测量的状态。 我可以用滚动条确认同样的事情。在调整浏览器大小后,我会阅读 $(window).height(),它可能会显示类似 500 的内容。然后我会刷新(不调整浏览器大小),它会显示更大的内容,例如 700。在我的在这种情况下,我可以通过溢出来修复它:隐藏在身体上,因为我不希望滚动条打开。一旦我这样做了,身高报告是一致的。

以上是关于jquery $(window).width() 和 $(window).height() 在未调整视口大小时返回不同的值的主要内容,如果未能解决你的问题,请参考以下文章

jquery 设置 html标签响应式布局

jQuery 获取页面宽高

jQuery - 检测窗口宽度变化但不检测高度变化

覆盖现有的jQuery窗口刷新

很实用的JQuery代码片段(转)

从jquery高度删除像素[重复]