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
関連記事
-
-
ajaxのエラー詳細を取得する
success or errorで分岐処理はできるけど、 エラー詳細取れないの? ...
-
-
jQueryにて$.parseHTML()を用いてHTML文字列をDOMノードに変換する方法
あるサイトのソースコードを拝見しているとjQueryで$.parseHTML() ...
-
-
クロスドメイン突破をjavascriptで行う
ajaxとかでクロスドメインを突破する際は、 PHPファイルを介すかJSONPを ...
-
-
JavaScriptで配列の中から最大・最小値を取得する方法
JavaScriptで配列の中から最大・最小値を取得したかった。以下に対応方法を ...
-
-
Leafletで「leaflet-search」プラグインを導入してマーカーの検索機能を追加する方法
LeafletとOpenStreetMapでマップ上にマーカーを複数設置した上で ...