JS でメディアクエリの変更を検知する

MediaQueryList を使うと、現在ページがメディアクエリの条件に合致しているのかを監視することができます。

使い方

new MediaQueryList() ではなく、window.matchMedia() を呼び出すことで作成されます。

// ビューポートが 768px 以上あるかを監視する MediaQueryList を作成
const mql = window.matchMedia('(min-width: 768px)')

if (mql.matches) {
  // ビューポートが 768px 以上のときの処理
} else {
  // ビューポートが 768px 未満のときの処理
}

イベントリスナーを設定する

上記のコードだけでは MediaQueryList 生成時の状態でしか分岐ができません。設定したメディアクエリに合致した・しなくなったタイミングでコードを実行するには、イベントリスナーを設定します。

const mql = window.matchMedia('(min-width: 768px)')
const onChangeMedia = ev => {
  // ev には呼び出し元の MediaQueryList が入っているので、これの matches を見れば良い
  if (ev.matches) {
    // ビューポートが 768px 以上のときの処理
  } else {
    // ビューポートが 768px 未満のときの処理
  }
}

イベントリスナーの設定には、普通のイベントのようにイベントハンドラーか、addEventListener() を使います。但し、IE 11 に対応する場合は MediaQueryList.addListener() を使う必要があります。

// IE 11 対応用の分岐（IE 11 では mql.onchange === undefined）
// 'onchange' in mql でも判定できる
mql.onchange === null
  ? mql.addEventListener('change', onChangeMedia, false)
  : mql.addListener(onChangeMedia)

// 処理が一つだけなら addEventListener() の代わりにイベントハンドラーによる設定でもよい
mql.onchange = onChangeMedia