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

Question

How can I detect when a user resizes the browser window?

I'm looking for a script that does somenthing when user resizes the window or when the window's width is less than, for example, 900px.

Answer 1

Meh, You can use jQuery, but...

You can subscribe to the window resize event like this:

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

Just be careful with this, since a if-statement that executes code when the width is less than n would execute that code a ridiculous number of times while you resize a window that meets those conditions. Better to set some flags or add classes to the document, and make those part of your condition as well.

CSS Media Queries is Where It's At !

However, what you're asking sounds like it would most appropriately be solved with CSS Media Queries . For instance, if we wanted to change the body background color when the window is less than 900px:

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

There's even a great polyfill for older version of 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

You can use $(window).resize() like follows

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

Here is the documentation for $.resize

Answer 4

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

Answer 5

According to what you need, this could handle when windows size is less than 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)');
 });​