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

【问题标题】：JS or jQuery or window resize or when window width is less than npxJS 或 jQuery 或窗口调整大小或当窗口宽度小于 npx
【发布时间】：2012-05-25 10:12:50
【问题描述】：

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

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

【问题讨论】：

你应该改用媒体查询。
如果需要支持旧版浏览器，请使用 js

标签： javascript jquery resize window

【解决方案1】：

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

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

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

请注意这一点，因为当宽度小于 n 时执行代码的 if 语句会在调整满足这些条件的窗口大小时执行该代码的次数非常可笑。最好在文档中设置一些标志或添加类，并将这些作为您的条件的一部分。

CSS 媒体查询在哪里！

但是，您的问题听起来最适合使用CSS Media Queries 解决。例如，如果我们想在窗口小于 900px 时更改 body 背景颜色：

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

对于旧版本的 IE，甚至还有一个很棒的 polyfill：https://github.com/scottjehl/Respond

【讨论】：

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

【解决方案2】：

jQuery：

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

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

【讨论】：

正如此处所选答案中所述，您不希望该函数在调整窗口大小时多次触发。我建议使用去抖动功能来防止这种情况。见davidwalsh.name/javascript-debounce-function

【解决方案3】：

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

【讨论】：

【解决方案4】：

根据你的需要，当窗口大小小于900px时可以处理：

 $(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)');
 });

【讨论】：

【解决方案5】：

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

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

这是$.resize的文档

【讨论】：

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

CSS 媒体查询 在哪里！

CSS 媒体查询在哪里！