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
関連記事
-
-
JavaScriptでリファラをチェックし、ホスト名と一致するかどうかで分岐処理する方法
ページアクセス時にリファラがホスト名と一致していれば何らかの処理を、一致しない場 ...
-
-
jQueryでユーザーが編集可能な文字列をページ上に表示する際にエスケープする方法
GETパラメータを取得し、その内容をページ上に表示したいケースがあった。また、A ...
-
-
IE&javascriptの予約語
前にもひっかかった問題で、今日同じことで 時間をとられたのでメモ。 予約語? っ ...
-
-
画像にマウスを合わせると拡大表示させる「drift」ライブラリの利用方法
amazon等ECサイトで商品画像にマウスを合わせると当該部分が拡大表示されると ...
-
-
JavScriptでalertを閉じた後にページ遷移させる方法
JavaScriptのalertが閉じたらページ遷移させてほしいと言われ、con ...