• JavaScript

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を使い、デバイス幅によって条件分岐する方法を紹介しました。

以上で解説を終わります。