.matchMedia()でJSでもメディアクエリを使って条件分岐する

JavaScriptでウィンドウサイズによる条件分岐はどのようにやっていますか。ちょっと前までは window.innerWidthresize を使って実装していたと思います。しかし、今ではもっと便利で使いやすい .matchMedia() があるのでそれを使ってみます。

.matchMedia()


if (matchMedia('(max-width: 798px)').matches) {
  // ウィンドウサイズが798px以下のとき
} else {
  // それ以外
}

.matchMedia() を使うことでCSSのメディアクエリのように条件分岐することができます。しかし、この記述だと ページが読み込まれた時 にしか実行されません。CSSのメディアクエリはウィンドウサイズを変更したらスタイルが適用されますよね。


var mediaQuery = matchMedia('(max-width: 798px');

// ページが読み込まれた時に実行
handle(mediaQuery);

// ウィンドウサイズが変更されても実行されるように
mediaQuery.addListener(handle);

function handle(mq) {
  if (mq.matches) {
    // ウィンドウサイズが798px以下のとき
  } else {
    // それ以外
  }
}

.addListener() を使うことでウィンドウサイズを変更しても実行されるようにできます。


var mediaQuery = matchMedia('(orientation: landscape)');

ちなみにこのようにすれば、スマホを 横にしている ときを判定することができます。