JavaScriptでブラウザ幅によって異なる処理を行う方法(matchMedia)
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
関連記事
-
-
Gif画像に再生ボタンを設置し、ユーザーの操作により再生⇔停止が行える「gifffer」ライブラリの利用方法
あるページにGif画像を設置し、当該画像が表示されても自動再生させず、再生ボタン ...
-
-
JavaScriptで同一サイトの2つのタブ(ページ)間で通信を行う方法
あるサイトでリンクをクリック時に別タブでページが開き、別タブ側のページで何らかの ...
-
-
JavaScriptで多次元連想配列
JavaScriptで多次元の配列を作る際にいつも迷ってしまうのでメモ。 ■こう ...
-
-
JavaScriptでランダムなカラーコードを生成する「RandomColor」ライブラリの利用方法
先日PHPでランダムなカラーコードを生成する「RandomColor.php」ラ ...
-
-
JavaScriptでリファラをチェックし、ホスト名と一致するかどうかで分岐処理する方法
ページアクセス時にリファラがホスト名と一致していれば何らかの処理を、一致しない場 ...