2019年10月29日

JavaScriptでもレスポンシブ対応が可能!?|window.matchMediaについて

JavaScriptでもレスポンシブ対応が可能!?|window.matchMediaについて

お世話になっております。佐藤です。

window.matchMediaを用いて、JavaScriptでもレスポンシブ対応を行う方法

今回はJavaScriptのファイル内でも手軽にレスポンシブ対応ができるwindow.matchMediaについて紹介します。

CSSでのレスポンシブ対応

CSSでは今や必須なレスポンシブ対応。
@media (max-width: 767.98px) {

}
こんな感じで実装していると思います。実はJavaScriptでもこういったことが可能です。方法としては大きく分けて2つあります。

  • デバイスを判定してレスポンシブ対応する
  • 画面幅によって条件分岐する

前者のパターンでコードを組んでいるものも多くみてきました。ただ、私の考えでは後者の方が対応範囲が広いかなと考えて後者のパターンを使用しています。

デバイスを判定してレスポンシブ対応する

var userAgent = window.navigator.userAgent;

これで現在のブラウザ情報(ユーザーエージェント)を知ることができます。詳細はこちらの記事ご覧になって頂きたいのですが、かなり面倒です。しかも処理の都合上、判定順を意識しないといけません。また、ブラウザを判定材料に使用しているので(厳密に画面幅で判定していないので)、もどかしい部分が出てきます。

画面幅によって条件分岐する

続いて画面幅によって条件分岐するパターンです。私はこちらを使用することの方が多いです。最近使用して便利だなと思ったのは以下のような時です。

スムーススクロール(PC時)
スムーススクロール(SP時)

上記のような際に、PC時に合わせてスムーススクロールの処理をJavaScriptで実装するとSP時に多少スムーススクロールの位置がずれることがあります。PCとSPで同じ幅にしておけば問題ないのですが、SP時はコンテンツを中心に見せるべきでありハンバーガーメニュなどは補足に過ぎないし、使いたい時にユーザーが使用できれば良いと考えているので、なるべく小さくしたいんです。

その時に若干ですが上記の画像のようにズレが生じます。デザインや画面幅によってはコンテンツと重なることも珍しくありません。それを解決できるのが「window.matchMedia」です。使い方は至って簡単です。

window.matchMediaの使い方

if (window.matchMedia( "(max-width: 768px)" ).matches) {

} else {

}

たったこれだけです。どうですか?かなり使い勝手が良いです。CSSのメディアクエリを同じような仕様で動いてくれるので、「resize」されるたびに処理が実行されることもありません。

window.matchMedia|対応ブラウザ

  • IE 10 以上
  • Firefox 6.0 以上
  • Chrome 9.0 以上
  • Safari 5.1 以上
  • Opera 12.1 以上
  • iOS Safari 6.0-6.1 以上
  • Android Browser 4 以上
  • Blackberry Browser
  • Opera Mobile
  • Chrome for Android
  • Firefox for Android
  • IE Mobile

IEでも一応サポートされています!ただ、IE9以下はサポートされていないのでIE9も対応したい場合はスクリプトの読み込みが必要です。

paulirish/matchMedia.js · GitHub

<script src="matchMedia.js"></script>
<script src="matchMedia.addListener.js"></script>
<script>
  // コードを記述
  if (window.matchMedia( "(max-width: 768px)" ).matches) {

  } else {

  }
</script>

こんな感じでJavaScriptでも手軽にレスポンシブ対応が可能です。
皆様の是非活用してみてください!