Question

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

我正在寻找一个脚本，当用户调整窗口大小或窗口宽度小于900px时，会执行somenthing。

Answer 1

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

您可以订阅窗口调整大小事件，如下所示：

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

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

CSS媒体查询是它在哪里！

然而，你所问的听起来最适合用CSS Media Queries来解决。例如，如果我们想在窗口小于900px时更改主体背景颜色：

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

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

Answer 2

jQuery：

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

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

Answer 3

您可以使用$(window).resize()，如下所示

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

以下是$.resize

的文档

Answer 4

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

Answer 5

根据您的需要，当窗口大小小于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)');
 });

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

5 个答案:

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

CSS媒体查询是它在哪里！