JavaScriptをCSSのメディアクエリのような感覚で処理を分ける

CSSのメディアクエリのようにJavaScriptの処理を分けたいという要件は割とよく出てきます。
そんなときによく使うコードは以下。

window.matchMedia
https://developer.mozilla.org/ja/docs/Web/API/Window/matchMedia

// 幅が768px以上のビューポートをターゲットとする条件を作成
var mediaQuery = window.matchMedia('(min-width: 768px)');
function handleTabletChange(e) {
  // メディアクエリがtrueかどうかを確認
  if (e.matches) {
    console.log('PC size');
  } else if (!e.matches) {
    console.log('SP size');
  }
} // イベントリスナーを登録

mediaQuery.addListener(handleTabletChange); // 初期チェック
handleTabletChange(mediaQuery);

// 幅が768px以上のビューポートをターゲットとする条件を作成

var mediaQuery = window.matchMedia('(min-width: 768px)');

function handleTabletChange(e) {

// メディアクエリがtrueかどうかを確認

if (e.matches) {

console.log('PC size');

} else if (!e.matches) {

console.log('SP size');

}

} // イベントリスナーを登録

mediaQuery.addListener(handleTabletChange); // 初期チェック

handleTabletChange(mediaQuery);

共有:

いいね: