ブラウザの画面サイズが変更されたときに処理を実行する

ブラウザサイズが変更したときに発生するイベントについて

ブラウザのサイズが変更されるとイベント「resize」が発生します。
このイベントはマウスでブラウザのサイズを変更したり、最大化や解除によっても発生します。

以下のコードはブラウザサイズが変更されたときに、ブラウザの表示領域のサイズをinnerWidthプロパティとinnerHeightプロパティから取得して出力します。
赤字になっている箇所でサイズ変更のイベントをイベントリスナーに登録します。

JS コード例

window.addEventListener('DOMContentLoaded', function(){
  window.addEventListener('resize', function(){
    console.log("Width:" + window.innerWidth);
    console.log("Height:" + window.innerHeight);
  });
});

1行目のaddEventListenerメソッドでは、ページの読み込み完了時に発生するイベント「DOMContentLoaded」をイベントリスナーに登録します。
この設定で、ページが読み込まれたときにブラウザのリサイズに関するイベントリスナーを登録できるようになります。

続いて、もう一度addEventListenerメソッドを呼び出してイベント「resize」をイベントリスナーに登録します。
その中で、console.logメソッドを使ってinnerWidthプロパティとinnerHeightプロパティの値を出力します。

このコードを実行すると、ブラウザのサイズを変更してみたら次のようにコンソールへ出力されます。

コンソールの出力例

Width:1722
Height:604
Width:1671
Height:604
Width:1606
Height:604
Width:1444
Height:604
Width:1237
Height:604

こちらの例では横幅のみを変更しているため、innerHeightプロパティは一定の値になっています。

このようにサイズを変更した時にブラウザサイズを参照したりすることで、メディアクエリのように画面幅に応じて処理を実行ししたりすることができます。