8

ユーザーがブラウザウィンドウのサイズを変更したことをどのように検出できますか？

ユーザーがウィンドウのサイズを変更したとき、またはウィンドウの幅がたとえば900px未満のときに、何かを実行するスクリプトを探しています。

4

5 に答える 5

16

ええと、jQueryを使用できますが、...

次のようにウィンドウサイズ変更イベントをサブスクライブできます。

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

幅がn未満のときにコードを実行するifステートメントは、これらの条件を満たすウィンドウのサイズを変更するときに、そのコードをばかげた回数実行するため、これには注意してください。いくつかのフラグを設定するか、ドキュメントにクラスを追加し、それらも条件の一部にすることをお勧めします。

CSSメディアクエリはそれがどこにあるかです！

ただし、あなたが求めていることは、CSSメディアクエリで最も適切に解決されるように思えます。たとえば、ウィンドウが900px未満のときにボディの背景色を変更したい場合は、次のようにします。

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

古いバージョンのIEには素晴らしいポリフィルもあります：https ：//github.com/scottjehl/Respond

于 2012-05-17T19:44:25.893 に答える
11

jQuery：

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

    var width = $(document).width();
    if (width < 900) {
       // do something else
    }
});
于 2012-05-17T19:41:31.377 に答える
4

$(window).resize()次のように使用できます

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

$.resizeのドキュメントは次のとおりです

于 2012-05-17T19:42:27.117 に答える
4 
$(window).resize(function() {
  $('body').prepend('<div>' + $(window).width() + '</div>');
  // Do stuff
});
于 2012-05-17T19:42:42.910 に答える
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)');
 });​
于 2012-05-17T19:47:31.753 に答える