レスポンシブWebデザイン実装時にスクリーンサイズによってJSの処理を分岐させる方法
レスポンシブWebデザインを実装する時にはメディアクエリを用いてCSSをスクリーンサイズ毎に設定できますが、JavaScriptの処理をスクリーンサイズ毎に分岐したい時ってありますよね。今回はそんな時にJSの処理を分岐する方法をご紹介します。
window.matchMediaを使う方法
window.matchMediaを使うとCSSのMedia Queriesと同じようにスクリーンサイズによってJSの処理を分ける事ができます。具体的には下記のようにif文で条件判定をして使います。
if (window.matchMedia('screen and (min-width:768px)').matches) {
//768px以上のデスクトップでの処理
}else{
//スクリーンサイズが768pxより小さい時の処理
}
また以下の例のようにaddListenerを用いてリスナを追加する事で「特定のスクリーンサイズになったとき」やスマートフォンで「縦向きから横向きになった時」などにイベントを発火させることも可能です。
function getOrientationValue (mediaQueryList) {
//処理
}
var screenCheck = window.matchMedia("(orientation: portrait)");
screenCheck.addListener(getOrientationValue);
window.matchMediaはIE11を始めChromeやFirefoxなどのモダンブラウザではサポートしていますが、IE9以下では使う事ができません。スマートフォンでのサポート状況はiOS7.1以降とAndroid4.1以降でサポートされています。
CSSのcontentプロパティとJSで処理を分岐する方法
IE9にも対応しなければいけないような場合にはCSSのcontentプロパティとJSを用いる方法があります
@media (min-width:768px) {
.navbar-nav {
content:'desktop'
}
}
@media (max-width:767px) {
.navbar-nav {
content:'mobile'
}
}
$(function(){
var client = $('.navbar-nav').css('content');
if (client === 'desktop') {
// do smth.
} else {
// do smth. else
}
})
メディアクエリによってcontentプロパティの中身を変え、それをJSで取得して条件判定をします。この方法で実装する場合はHTMLが全て読み込まれてDOMが構築されてからでなければcontentプロパティが取得できず上手く動かないので、そこだけ注意をしてください。
matchmedia.jsを使う方法
IE9にも対応する方法としてはmatchMedia.jsを使うやりかたもあります。IE8以下はそもそもMediaQueriesに対応していないのでここで紹介したやり方を使う事はあまりないとは思いますが、IE9にも対応する場合にはどれでやるかを検討してやったほうが良さそうですね。
