【JavaScript】特定のウィンドウ幅以下のときに処理をする方法

投稿日:2023/11/24　最終更新日:2023/11/24

【JavaScript】特定のウィンドウ幅以下のときに処理をする方法

プログラミング

JavaScriptを用いて「画面幅が600px以下の時にリロードせず、特定の処理をしたい」みたいな時に便利なtipsです。

addEventListnerのresizeを使う

window.addEventListner("resize", function() {
　// 画面幅が600px以下の場合
  if(window.innerWidth <= 600) {
    // 特定の処理を書く
  };
　// 画面幅が600px以上の場合
  if(window.innerWidth >= 1200) {
    // 特定の処理を書く
  };
});

addEventListnerメソッドのresizeイベントは画面幅の変更を常に監視します。

そして、window.innerWidthで画面幅の数値を取得しつつ指定の画面幅以下or以上のifを描くことで、

レスポンシブなサイトにて画面幅に合った処理などを発動させることができます。

この書き方をすることでブラウザのリロードをせずに関数を発動させることができるため、

ユーザー体験においても良い効果を生み出します。