レスポンシブページで、特定のデバイス幅だけJavaScriptを動作させるときの覚書

2017.7.4

レスポンシブページのコーディング時に、スマホビューだけプルダウンにするみたいな要望があって、普段よく対応しているのがPC, SPで出し分けなサイトなので、どういう実装にするのが良いのかちょっと悩んだ。

とりあえず思い浮かんだのはこれ

ただ、上の方はレスポンシブサイトの場合あまり適さない。
window.innerWidth の方かなーと思っていたけど、スクロールバーの関係で、innerWidth でやると面倒くさいらしい。
参考: window.matchMedia をそろそろ活用してもいい頃

そこで割りと良さそうなのが、 window.matchMedia 。

window.matchMediaを使って実装

matchMedia() の引数にメディアクエリの文字列を入れることで、その幅かどうかを判別してくれるみたいなそんな雰囲気。

if (window.matchMedia( "(min-width: 400px)" ).matches) {
  /* ビューポートの幅が 400 ピクセル以上の場合のコードをここに */
} else {
  /* ビューポートの幅は 400 ピクセル未満の場合のコードをここに */
}

window.matchMedia - Web API インターフェイス | MDN から抜粋

window.matchMedia がIE9以下は対応していない。
もし対応するなら以下のスクリプトを読み込ませる必要があるのかも。

対応しない場合でも、閲覧されるとスクリプトとしては動いてしまうので、以下みたいにすると対応してないブラウザでは動作しないようにできる。

if (window.matchMedia) {
  // 対応しているブラウザだけ動作
}