Written by Kasumi

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

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

目次

関連記事

JavaScript

JavaScriptでCSVファイルを読み込み!配列で取得する方法

2022.11.18
515
JavaScript

disabledを使って任意のinput要素を入力無効にする方法【条件判定で解除する】

更新日:2022.09.09
912
JavaScript

JavaScriptでスクロールしたら要素をアニメーション表示する方法【Intersection Observer APIが便利】

2022.09.08
490
JavaScript

JavaScriptでHTML要素(DOM)を動的に移動する方法

2022.10.13
368