JS或jQuery或窗口調整大小或窗口寬度小於npx

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，甚至還有一個很好的polyfill： 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($(this).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)');
 });​