window.matchMediaを使う（JavaScript）

前書き

window.matchMediaの使い方を掲載しています。

目次

1. window.matchMediaについて
2. ウィンドウサイズによって処理を分ける
3. ウィンドウサイズが変わったら処理をする
4. PCサイズの時だけリサイズイベントを実行する
5. 参考

window.matchMediaについて

指定したウィンドウサイズと一致しているか判定してくれるので、ウィンドウサイズによって処理を分けることが出来る。
また、メディアクエリの状態（一致、不一致）が変わった時にコールバック関数を実行してくれる。リサイズする度に実行されるリサイズイベントの代わりに使用すれば、負荷を小さく出来る。

ウィンドウサイズによって処理を分ける

例

ページを読み込む時に、ウィンドウサイズによって、表示する文言を変えています。

<p>ウィンドウサイズは<em class="js-disp-a"></em>です。</p>

const mq11 = window.matchMedia("(max-width: 599px)");
const mq12 = window.matchMedia("(min-width: 600px) and (max-width: 1199px)");
let textA = "";

document.addEventListener("DOMContentLoaded", function(){
  if (mq11.matches){
    textA = "599px以下";
  }else if (mq12.matches){
    textA = "600px以上1199px以下";
  }else{
    textA = "1200px以上";
  }
  document.querySelector(".js-disp-a").textContent = textA;
});

ウィンドウサイズが変わったら処理をする

例

ページを読み込む時と、ウィンドウサイズが変わった時に、表示する文言を変えています。
ブレイクポイントは二つです。

<p>ウィンドウサイズは<em class="js-disp-c"></em>です。</p>

const mq31 = window.matchMedia("(max-width: 599px)");
const mq32 = window.matchMedia("(min-width: 600px) and (max-width: 1199px)");
let textC = "";

//ページを読み込む時に実行
handleC();

//コールバック関数を渡す。メディアクエリの状態（一致、不一致）が変わった時に実行される。
mq31.addListener(handleC);
mq32.addListener(handleC);

//コールバック関数
function handleC() {
  if (mq31.matches){
    textC = "599px以下";
  }else if (mq32.matches){
    textC = "600px以上1199px以下";
  }else{
    textC = "1200px以上";
  }
  document.querySelector(".js-disp-c").textContent = textC;
}

PCサイズの時だけリサイズイベントを実行する

iOSのSafariでは、スクロールをする度にリサイズイベントが起こってしまう時があります。それを回避します。

resizeイベントを使用する場合は、iOS Safariでの挙動に注意

例

600px以上の時だけ、ウィンドウサイズが変わる度にそのサイズを取得して、表示する文言を変えています。

<p>ウィンドウサイズは<em class="js-disp-d"></em>です。</p>

const mq41 = window.matchMedia("(max-width: 599px)");
let textD = "";

//ページを読み込む時に実行
handleD();

//コールバック関数を渡す。メディアクエリの状態（一致、不一致）が変わった時に実行される。
mq41.addListener(handleD);

//コールバック関数
function handleD() {
  if (mq41.matches){
    textWrite();
    window.removeEventListener("resize", onWindowResize, true); //削除
  }else{
    textWrite();
    window.addEventListener( 'resize', onWindowResize , true ); //登録
  }
}

//リサイズ時
function onWindowResize () {
  textWrite();
}

//書き換え
function textWrite() {
  textD = window.innerWidth + "px";
  document.querySelector(".js-disp-d").textContent = textD;
}

参考

[JS] window.matchMedia をつかって JavaScript のコードをレスポンシブに分ける方法

MediaQueryList

window.matchMedia をそろそろ活用してもいい頃

関連記事

Intersection Observer APIを使う（JavaScript）

Webページの表示を速くする（PageSpeed Insights）