勉強したことのメモ

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

  関連記事

javascriptでランダム英数字
javascriptでランダム英数字

やりたかった事はjavascriptでランダム英数字の羅列を取得。 ■参考サイト ...

セレクトメニュー(プルダウン)をdisplay:none;指定してもiPhoneのみ非表示にならない問題の対応方法
セレクトメニュー(プルダウン)をdisplay:none;指定してもiPhoneのみ非表示にならない問題の対応方法

セレクトメニュー(プルダウン)に対してdisplay:none;指定したりjQu ...

Video.jsで再生速度及び音量の設定状況をブラウザに保存させる方法(videojs-persist)
Video.jsで再生速度及び音量の設定状況をブラウザに保存させる方法(videojs-persist)

Video.jsで再生速度及び音量を変更してもページ更新・遷移すると設定状況がリ ...

jQuery Nice Selectを特定ページのみ無効にする方法
jQuery Nice Selectを特定ページのみ無効にする方法

bootstrap系のテンプレートデザインを使用したサイトを構築中に、セレクトメ ...

HTMXで指定ページ内の指定要素を取得及び出力する方法サンプル
HTMXで指定ページ内の指定要素を取得及び出力する方法サンプル

あるサイトのHTMLタグ内に「hx-〇〇」という見慣れないタグが記述されていた。 ...