为什么页面加载时$（window）.width（）会发生变化？

Question

我注意到我的脚本设置的宽度不正确，所以我尝试了以下代码段：

var prev;
setInterval(function(){
    if($(window).width()!=prev)
        console.log(prev=$(window).width());
},1);

这打印出两个不同的值：1464和1481.由于它们相距17px，我几乎可以肯定这是由滚动条引起的。第二个值是正确的值。

为什么$(window).width()会在不调整窗口大小的情况下进行更改？它不应该返回浏览器窗口的宽度，这应该是常量吗？

Answer 1

$(window).width()返回window对象的宽度，不包括滚动条（也称为视口宽度）。根据操作系统和浏览器，垂直滚动条通常可以从视口宽度中减去。这意味着您应该在加载所有内容后调用此函数，如果内容发生更改，则需要再次调用此函数。

将其放在$.ready()函数中并不能保证您将获得与最终页面内容相关的正确宽度。这是因为$.ready在加载DOM时会触发，但可能仍然存在可能影响布局的图像/字体。 调用$.ready()之后，很可能会添加滚动条。解决此问题的最简单方法是将您的调用放在$(window).load()函数中，因为当所有内容都已加载时会触发，并且没有其他内容可以呈现。

一般来说，最好在DOM就绪，窗口加载，窗口大小调整以及内容更改时设置宽度。这可以这样做：

$(function() {
  var window_width;

  function set_window_width() {
    window_width = $(window).width();

    // do something with window_width
  }
  set_window_width(); // set width on DOM ready

  $(window).on('load resize', set_window_width); // set width on window load and resize

  function custom_load_content() {
    // load / change content

    set_window_width();
  }
});

大多数（如果不是全部）时间，视口宽度是您想要的。您可能正在使用宽度来执行某些计算和/或调整某些元素的大小，这应始终相对于视口，因为您的CSS是相对于视口的。但是，如果由于某种原因您希望获得宽度包括滚动条，则可以使用window.innerWidth代替（source）。

Answer 2

$(window).width()受边距，边框和填充的影响。 这些可以在加载DOM时发生变化。 如上所述，在开始查看/使用DOM对象之前，请确保等到$(document).ready()。

此处有更多信息http://api.jquery.com/width/

Answer 3

在大多数情况下，窗口宽度随内容而变化，因此必须有一些ajax调用来改变窗口的某些内容。您可以使用浏览器调试工具并打开网络流量窗口，查看窗口宽度发生变化时的情况，调试到javascript文件以查找该窗口的哪个部分随ajax调用而变化，这可以帮助您找到原因。