JS或jQuery或窗口调整大小或当窗口宽度小于npx时

Question

如何检测用户调整浏览器窗口大小？

我正在寻找一个脚本，当用户调整窗口大小或窗口宽度小于900像素时执行某些操作。

- itsme

---

你应该使用媒体查询。 - SLaks

如果需要支持旧版浏览器，请使用JS。 - Huangism

Answer 1

嗯，你可以使用jQuery，但是...

你可以像这样订阅窗口大小调整事件：

$(window).on("resize", function(event){
  console.log( $(this).width() );
});

在使用这种方法时要小心，因为当宽度小于n时执行代码的if语句将在调整满足这些条件的窗口大小时执行无数次该代码。最好设置一些标志或将类添加到文档中，并将其作为条件的一部分。

CSS Media Queries是王道！

然而，你所问的问题似乎最适合使用CSS媒体查询解决。例如，如果我们想在窗口小于900px时更改body背景颜色：

@media screen and (max-width: 900px) {
  body {
    background: #ccc;
  }
}

甚至有一个非常好的polyfill，适用于旧版本的IE：https://github.com/scottjehl/Respond

- Sampson

---

我不确定这是否属于离题，但我使用JS而不是CSS媒体查询实现响应式视图的一个用例是切换正在使用的视图模板（在我的示例中使用durandal.js / knockout.js）。我发现width()函数可以工作，但是当缩放时也会发生变化。我仍然不确定如何在这种情况下获取实际宽度（在我看来，它不应该在缩放时发生变化）。 - jamiebarrow

Answer 2

jQuery：

$(window).resize(function() {
    //do something

    var width = $(document).width();
    if (width < 900) {
       // do something else
    }
});

- Silkster

---

正如在这里所选的答案中提到的那样，您不希望在调整窗口大小时触发函数多次。我建议使用防抖函数来防止这种情况发生。请参见 https://davidwalsh.name/javascript-debounce-function - Silkster

Answer 3

您可以像下面这样使用$(window).resize()：

$(window).resize(function() {
     if($(this).width() < 900)
       //do whatever you want
  });

以下是$.resize的文档：

这里是$.resize的文档。

- Prasenjit Kumar Nag

Answer 4

$(window).resize(function() {
  $('body').prepend('<div>' + $(window).width() + '</div>');
  // Do stuff
});

- Kvam

Answer 5

根据您的需求，当窗口大小小于900像素时，可以处理如下：

 $(window).on("resize", function(event){
      console.log('User is using resize!');
      var w = $(this).width();
      if(w < 900)
        console.log('Your window is ' + w + 'px (less than 900px)');
 });​

- Oscar Jara