javascript - Web ブラウザ ウィンドウの幅の変更を自動的に検出しますか?

Question

$(window).width() を使用すると、Webブラウザーのサイズを取得できることを知っています。

ユーザーが Web ブラウザーのサイズを変更したことを検出して、列の幅を再調整できるようにしたいと考えています。これを自動的に検出する方法はありますか、または setTimeinterval を使用してループし、変更されたかどうかを確認する必要がありますか?

Answer 1

サイズ変更イベントを試す

$(window).resize(function() {
  console.log('window was resized');
});

Answer 2

JavaScript イベントの名前はwindow.onresize.

JQuery バインディングの名前は.resize()

Answer 3

覚えておくべきこと - 少なくとも IE では、サイズ変更イベントがバブルし、配置された要素とドキュメント本文が独立したサイズ変更イベントを発生させる可能性があります。

また、ウィンドウまたは要素がドラッグによってサイズ変更されると、IE は「サイズ変更」イベントの連続ストリームを発生させます。他のブラウザは、マウスアップが起動するのを待ちます。

IE は十分に大きなプレーヤーであるため、フィールドのサイズ変更イベントを行う中間ハンドラーがあると便利です。たとえ IE クライアントのみに分岐したとしてもです。

IE ハンドラーは、「実際の」サイズ変更ハンドラーを呼び出す前に、短いタイムアウト (100 ～ 200 ミリ秒) を設定します。タイムアウトの前に同じ関数が再度呼び出された場合、それはバブル イベントであるか、ウィンドウが新しいサイズにドラッグされているため、タイムアウトをクリアしてから再度設定します。