JavaScriptでブラウザ幅によって異なる処理を行う方法(matchMedia)
JavaScriptでブラウザ幅によって異なる処理を行う場合、「window.addEventListener('resize', 幅チェック用関数);」のような形で実装していたけど、これだとブラウザ幅を変更する度に実行されるので負荷がかかる。matchMediaを使うことで負荷軽減できるみたいなので実装方法をメモ。
ソースコード
以下ソースコードの場合はブレークポイントが切り替わったタイミングでのみcheckWidthが実行されるため負荷軽減になる。
//ブレークポイントの指定 const limit = window.matchMedia(`(max-width: 800px)`); //イベントの指定 limit.addEventListener(`change`, checkWidth); //ページ表示時に実行 checkWidth(limit); //ブラウザ幅のチェック用関数 function checkWidth(e){ if( e.matches ){ console.log(`スマホ幅`); }else{ console.log(`PC幅`); } }
リファレンス
window.matchMedia
https://developer.mozilla.org/ja/docs/Web/API/Window/matchMedia
Element: matches() メソッド
https://developer.mozilla.org/ja/docs/Web/API/Element/matches
関連記事
-
-
jQueryでHTMLの特定要素をループ時に逆順で処理する方法
jQueryでリスト(li)タグ等の特定要素をeach()でループ処理する場合、 ...
-
-
jQueryで指定した要素を簡単にフォーカスするfocusbleの使い方
divやspanなど指定した要素を簡単にフォーカスするjQueryプラグインがあ ...
-
-
JavaScriptの変数宣言であるvar / let / constの使い分けについて
JavaScript関連の調べ物をしていた際、変数の宣言時にvarではなくlet ...
-
-
「display: block !important;」指定された要素をjQueryで非表示にする方法
jQueryで特定の要素を非表示にしたかったのでhide()を使用したところ非表 ...
-
-
構造化データ(JSON-LD形式)をJavaScriptで動的に描写する方法
あるサイトに構造化データをJSON-LD形式で出力させたかった。ただ、当該環境で ...