【JavaScript】スマホとPCの判断など、画面サイズで条件分岐をする例｜メディアクエリを判断

JavaScriptを使用していると、スマートフォン・タブレットなどのモバイル端末やPCによって処理を変更したい場合があるかもしれません。

今回は、そのような場合に使用できるJavaScriptの例となり、メディアクエリでブラウザのウィンドウサイズを判断して、条件分岐を行う方法となります。

画面サイズを判断して条件分岐をする例

以下の例では、指定したメディアクエリ min-width: 768px が、現在のメディアクエリと一致するかを判断する関数を定義し実行しています。

また、ウィンドウのリサイズなどで現在のメディアクエリを変更した際に、指定したメディアクエリによる判断の結果が変わる場合にも定義した関数を実行しています。

document.addEventListener('DOMContentLoaded', function(){

    // 条件分岐の判断に利用するメディアクエリを指定
    const mq = window.matchMedia( "(min-width: 768px)" );
    
    // メディアクエリを判断する関数を定義して実行
    function mqCheck(mq) {
      if (mq.matches) {
        // ビューポートの幅が 768 ピクセル以上の場合

      } else {
        // ビューポートの幅は 768 ピクセル未満の場合

      }
    }
    mqCheck(mq);

    // MediaQueryListが持つ情報が変更された場合に、定義した関数を実行
    mq.addEventListener('change', mqCheck, false);
}, false);

JavaScriptの説明

以下、JavaScriptのポイントとなる箇所の説明となります。

判断に利用するメディアクエリを指定

コード4行目の箇所では、window.matchMediaメソッドの引数に、判断に利用するためのメディアクエリを指定しています。

window.matchMediaメソッドは、MediaQueryList オブジェクトを返します。

MediaQueryListは、window.matchMediaの引数に指定したメディアクエリの情報や、そのメディアクエリと現在のメディアクエリを比較した際の真偽値などを持ちます。

メディアクエリを判断する関数を定義して実行

コード7行目からの箇所では、window.matchMediaで取得したMediaQueryListを元に、メディアクエリを判断する関数を定義して実行しています。

MediaQueryListのmatchesプロパティは、MediaQueryList のメディアクエリの情報を、現在のメディアクエリと比較した際の真偽値を返します。

MediaQueryList が持つ情報が変更された場合に定義した関数を実行

コード19行目の箇所では、ウィンドウをリサイズした際などに、MediaQueryList が持つメディアクエリを判断する真偽値が変更された場合に、上記で定義した関数を実行しています。

MediaQueryList オブジェクトでは、現在のメディアクエリの変更により、MediaQueryList が持つメディアクエリを判断する真偽値が変更されると、MediaQueryListに対してchange イベントが送信されます。

そのため、MediaQueryListの.addEventListenerメソッドでchange イベントを利用できます。