勉強したことのメモ

Webエンジニア / プログラマが勉強したことのメモ。

JavaScriptでブラウザ幅によって異なる処理を行う方法(matchMedia)

  JavaScript

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

 - JavaScript

  関連記事

NicEdit(WYSIWYGエディタ)に画像アップロード機能を追加する方法

NicEdit(ウィジウィグエディタ)に画像アップロード機能を追加したかった。本 ...

ブラウザ上で画像の切り抜き等編集を行う方法(Cropper.js)

あるサイトで画像をアップロードし、その画像に対してブラウザ上で切り抜き等トリミン ...

jQueryプラグインのDateTimePickerで年月日と時間のピッカーを実装する方法

jQueryで年月日と時間を選択できるピッカーを導入したかった。以前にboots ...

Leafletで「sidebar-v2」プラグインを導入してマップ上にサイドバーを設置する方法

Leafletでマップ上にサイドバー及びサイドメニューを実装したい。調べたところ ...

Leafletにアイコン(ボタン)を設置できる「Leaflet.EasyButton」プラグインの利用方法

先日「leaflet-tag-filter-button」プラグインのCDN呼び ...