JavaScript

レシピ

イベント

JavaScriptコードにメディアクエリを設定する

CSSのようにブラウザのサイズや端末の向きを判定するメディアクエリを使用して、処理を出し分ける方法を解説します。

この記事のポイント

  • matchMediaメソッドを使うとCSSと同じようにJavaScriptでもメディアクエリを適用できる
  • ブラウザのサイズ変更でメディアクエリを適用するときはイベントresizeと組み合わせて使う

メディアクエリをJavaScriptでも適用する

CSSのメディアクエリはWebサイトのレスポンシブ対応でよく使用されますが、JavaScriptのコードでも同じようにメディアクエリを適用することができます。

JavaScriptではmatchMediaメソッドを使って、メディアクエリを適用する条件を指定します。
以下の例は767pxまでをスマートフォン、768px〜1000pxまでをタブレット、1001px以降をパソコンでの表示としてそれぞれコンソールにメッセージを出力します。

JavaScript コード例

// 〜767pxまで
if( window.matchMedia("screen and (max-width:767px)").matches ) {
	console.log("Smartphone");
}

// 768px〜1000pxまで
if( window.matchMedia("screen and (min-width:768px) and (max-width:1000px)").matches ) {
	console.log("Tablet");
}

// 1001px〜
if( window.matchMedia("screen and (min-width:1001px)").matches ) {
	console.log("PC");
}

matchMediaメソッドにメディアクエリの適用条件を指定しますが、CSSと同じ形式で指定することができます。
JavaScriptは基本的にディスプレイ表示での使用になるため、「screen」などメディアタイプの指定は省略しても差し支えありません。

もしブラウザのサイズ変更(リサイズ)があったときにメディアクエリの適用をチェックしたいときは、イベント「resize」と組み合わせます。

JavaScript コード例

window.addEventListener('DOMContentLoaded', function(){
  window.addEventListener('resize', function(){

    // 〜767pxまで
    if( window.matchMedia("screen and (max-width:767px)").matches ) {
      console.log("Smartphone");
    }
    
    // 768px〜1000pxまで
    if( window.matchMedia("screen and (min-width:768px) and (max-width:1000px)").matches ) {
      console.log("Tablet");
    }
    
    // 1001px〜
    if( window.matchMedia("screen and (min-width:1001px)").matches ) {
      console.log("PC");
    }

  });
});

1行目のイベント「DOMContentLoaded」では、ページの読み込みが完了したタイミングでブラウザのサイズ変更(リサイズ)を検出できるようにイベント「resize」をイベントリスナーに登録します。

イベント「resize」が発生したときに実行する処理については、冒頭のコードと同じメディアクエリを使用しています。
この処理をブラウザで実行すると、ブラウザのサイズ変更があったら表示サイズにあわせて処理を実行することが可能になります。

こちらの記事は役に立ちましたか?

ありがとうございます。
もしよろしければ、あわせてフィードバックや要望などをご入力ください。

コメントありがとうございます!
運営の参考にさせていただきます。