勉強したことのメモ

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

  関連記事

CodeIgniter4 & jQueryを用いて同一サイト内でajax通信する方法
CodeIgniter4 & jQueryを用いて同一サイト内でajax通信する方法

CodeIgniter4.4.4 & jQueryを用いて同一サイト内で ...

leaflet.jsとOSMでマーカーの画像をそれぞれ指定する
leaflet.jsとOSMでマーカーの画像をそれぞれ指定する

leaflet.jsとOpenStreetMapでマップ上にマーカーを複数設置し ...

JavaScriptでオブジェクトをzlib圧縮してCookieに保存できる「zcookies」ライブラリの利用方法
JavaScriptでオブジェクトをzlib圧縮してCookieに保存できる「zcookies」ライブラリの利用方法

あるシステムでCookieを保存している部分があった。ただ、日本語を保存している ...

iPhoneにホーム画面登録を促すダイアログを表示
iPhoneにホーム画面登録を促すダイアログを表示

スマホ用のサイトでお気に入り登録を促すというのは以前に無理という結論が出たけれど ...

reCAPTCHA v2でAjaxは使わずにチェック状況を確認する方法
reCAPTCHA v2でAjaxは使わずにチェック状況を確認する方法

reCAPTCHA v2を実装する案件があり以前の記事を参考に組み込んでみたもの ...