javascript - 为什么 $(window).width() 在页面加载时发生变化？

Question

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

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

这打印了 2 个不同的值:1464 和 1481。由于它们相隔 17 像素，我几乎可以肯定这是由滚动条引起的。第二个值是正确的值。

为什么 $(window).width() 在不调整窗口大小的情况下发生变化？它不应该返回浏览器窗口的宽度，该宽度应该是常量吗？

Answer 1

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

将其放入 $.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();
  }
});

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