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
関連記事
-
-
leaflet.jsとOSMでマップ表示及びマーカー設置方法
GoogleMapAPIを用いたマップ及びマーカー表示にクレジットカード登録が必 ...
-
-
Video.jsで表示させた動画プレイヤーにロゴ画像(透かし)を追加する方法(videojs-logo)
Video.jsで表示させた動画プレイヤーの右上等、指定の位置にロゴ画像(透かし ...
-
-
クロスドメインのiframeで子フレームから親フレームにheightの値を渡す
やりたかった事は、 ・iframeで子フレームから親フレームにheightの値を ...
-
-
leaflet.jsとOSMでマーカーの画像をそれぞれ指定する
leaflet.jsとOpenStreetMapでマップ上にマーカーを複数設置し ...
-
-
サイトをダークモード対応させる「Darkmode.js」ライブラリの利用方法
サイトをダークモード対応させる場合、CSSで色々指定しないといけないと思っていた ...