【JavaScript】スマホとPCで条件を分岐する方法
WEBサイトはスマホやPCタブレットなどさまざまな端末、
ウィンドウサイズで閲覧されることを想定して制作する必要があります。
見た目を変化させる場合はCSSのメディアクエリで分岐させますが、
JavaScriptで処理を分岐させたい場合のコードをご紹介します。
window
のイベントresize
を利用する方法は昔から採用されていますが、
リサイズが起きるたびに処理が行われ都度負荷がかかる処理になります。
その回避方法としてCSSのメディアクエリと同じ感覚で
指定のブレイクポイントに到達したタイミングを検知し、
処理を実行するmatchMedia
というメソッドを今回はご紹介します。
目次
実際のコード
// ターゲットとなる要素を取得
const elm = document.querySelector(".elm");
// ブレイクポイントに到達したタイミングで実行される関数
const mediaChangeSp = (query) => {
if(query.matches) {
// 600px以下に変化したタイミングでこちらを実行
elm.classList.add("hoge");
} else {
// 601px以上に変化したタイミングでこちらを実行
elm.classList.remove("hoge");
}
};
// ブレイクポイントを追加
const querySp = matchMedia("(max-width: 600px)");
querySp.addListener(mediaChangeSp);
// 初回表示の際も実行
mediaChangeSp(querySp);
実装について解説
ご紹介したJavaScriptについて解説します。
matchMediaへブレイクポイントの指定を渡す
ブレイクポイントはCSSと同じようにmax-width
やmin-width
で指定します。
サンプルでは600px
にしていますが、もちろん任意の数値を指定可能です。
指定したサイズに到達したかを検知し、処理を実行する
ブレイクポイントをmatchMedia
に引数として渡して作成したオブジェクト(サンプルだとquerySp
)に、
イベントが実行されたタイミングで行う関数を渡します。
これにより、resize
とは異なり指定したサイズへの変化があるかを監視し、
必要なタイミングでのみ処理が実行されるようになります。
補足
サイズに限定せず、例えばスマホが縦向きなのか横向きなのかで処理を分けることも可能です。
const land = matchMedia("(orientation: landscape)");// 横
const port = matchMedia("(orientation: portrait)");// 縦
最後に
見た目についてはCSSを利用するほうがシンプルで適切です。
ただ、クラスを動的に変化させたり、動的な処理においてサイズにあわせた処理を行う場合など、
より複雑な条件においては有効に活用できる場面があると思います。
参考になれば幸いです。
- SNIPPET
- JavaScript
- 【JavaScript】スマホとPCで条件を分岐する方法