勉強したことのメモ

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

  関連記事

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形式で出力させたかった。ただ、当該環境で ...