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

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