JavaScriptでメディアクエリを使用する方法2選

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

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

let userAgent = window.navigator.userAgent;

これで現在のブラウザ情報（ユーザーエージェント）を知ることができます。ブラウザによって「userAgent」に代入される文言が以下のように変更になります。

しかし、以下の条件だけでは正確なブラウザを判定できないため、if文にて正確に条件分岐してあげる必要があります。

let userAgent = window.navigator.userAgent.toLowerCase();

if(userAgent.indexOf('msie') != -1 || userAgent.indexOf('trident') != -1) {
 // IEの場合
} else if(userAgent.indexOf('edge') != -1) {
 // Edgeの場合
} else if(userAgent.indexOf('chrome') != -1) {
 // GoogleChromeの場合
} else if(userAgent.indexOf('safari') != -1) {
 // Safariの場合
} else if(userAgent.indexOf('firefox') != -1) {
 // FireFoxの場合
} else if(userAgent.indexOf('opera') != -1) {
 // Operaの場合
} else {
 // その他
}

ブラウザの種類で判定しているので（厳密に画面幅で判定していないので）、思ったように動作しない可能性も少なくありません。

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

次は画面幅によって条件分岐するパターンです。私はこちらを使用することの方が多いです。

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でも一応サポートされていますので、導入はしやすいかなと思います。

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