勉強したことのメモ.

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

  関連記事

Gif画像に再生ボタンを設置し、ユーザーの操作により再生⇔停止が行える「gifffer」ライブラリの利用方法
Gif画像に再生ボタンを設置し、ユーザーの操作により再生⇔停止が行える「gifffer」ライブラリの利用方法

あるページにGif画像を設置し、当該画像が表示されても自動再生させず、再生ボタン ...

jQueryからAjax経由でPHPにリクエストしCookieを操作する方法
jQueryからAjax経由でPHPにリクエストしCookieを操作する方法

先日PHPでCookie保存時にHttpOnly / Secure属性を設定する ...

国土地理院のAPIを使用して無料でジオコーディング(住所→経度緯度)を行う方法
国土地理院のAPIを使用して無料でジオコーディング(住所→経度緯度)を行う方法

GoogleMapAPIでジオコーディングをするには、支払い情報を登録したアカウ ...

videoタグで表示させた動画をjQuery&CSSでフローティングビデオ対応させる方法
videoタグで表示させた動画をjQuery&CSSでフローティングビデオ対応させる方法

Web上の動画をFloatingVideo対応したいという要望を受けた。ページ上 ...

JavaScriptにて「loglevel」ライブラリを利用して環境及びレベルによりログを出し分けする方法
JavaScriptにて「loglevel」ライブラリを利用して環境及びレベルによりログを出し分けする方法

JavaScriptにて何らかの確認の際にconsole.logを使うことが多い ...