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】inputの文字数制限を超えたら任意の処理を実行する方法

2023.03.29
3100
JavaScript

【CSS・JS】本文を透過グラデーションで隠して、もっと見るボタンで開閉するアコーディオンを実装する方法

2023.01.28
5644
JavaScript

【JavaScript】配列から最大値・最小値を求める方法

2022.06.08
925
JavaScript

JavaScriptでページの読み込み中、ローディング画面を表示する方法

2023.02.15
10916