JavaScriptを使い、デバイス幅によって条件分岐する方法【jQuery不要】

JavaScriptを使って、デバイス幅によって条件分岐。動的処理を変更したい。
jQueryなどライブラリを使わず実装したい。
本記事ではこのような悩みを解決。
実装例を元に解説します。
実装サンプル
See the Pen
JavaScriptを使い、デバイス幅によって条件分岐する方法 by Kohei (@kouk05)
on CodePen.0
実装サンプルです。
デバイス幅がスマホのブレイクポイント767px以下であれば【デバイス幅は767px以下です】と表示。
767px以上であれば【デバイス幅は767px以上です】と表示するようにJavaScriptで処理を実行してます。
実装手順は以下の通りです。
デバイス幅によって条件分岐するJavaScriptコード
var display01 = document.querySelector('.display01');
var display02 = document.querySelector('.display02');
if (window.matchMedia("(max-width: 767px)").matches) {
// 767px以下の処理
display01.style.display="block";
} else if (window.matchMedia("(min-width:767px)").matches) {
// 767px以上の処理
display02.style.display="block";
}
デバイス幅によって条件分岐するJavaScriptコード例です。
window.matchMediaを使う事でCSSのメディアクエリと同じ様にデバイス幅を判定する事ができます。
使い方は以下の通りです。
if(window.matchMedia(“(max-width or minwidth: デバイス幅;)”).matches) {
処理
}
if文を定義。
条件式にwindow.matchMediaを指定。
引数にCSSのmax-width もしくは min-widthプロパティを入れます。
デバイス幅をpxで指定。
デバイス幅が○○px以上の時に処理を実行したい場合はmax-widthを使用。
デバイス幅が○○px以下の時に処理を実行したい場合はmin-widthを使います。
以上でデバイス幅での条件分岐が完了です。
if文内で任意の処理を実行しましょう。
まとめ
JavaScriptを使い、デバイス幅によって条件分岐する方法を紹介しました。
以上で解説を終わります。