JavaScript

【JavaScript】デバイスの幅や向きによって処理を分岐させたい（window.matchMedia）

 

先日案件でスマートフォンなどのデバイスを横向きにした時に処理を実行する方法を検索したところ、かつて使用されていたorientationchangeイベントが現在非推奨になっていました。

その替わりとなり、かつ便利な「matchMedia」というwindowオブジェクトのメソッドで実装することができたので使い方を紹介していきます。

window.matchMediaの使い方

changeイベントから渡ってきたEventオブジェクトのmatchesプロパティで状態を監視し、デバイスの状態がメディアクエリ文字列に一致するかどうか（trueまたはfalse）を判断するため、デバイスの向きや幅によって実行したい処理を分岐させることが可能です。

// 基本型
window.matchMedia('メディアクエリ文字列').addEventListener('change', function(e) {
     if(e.matches) {
       // メディアクエリ文字列の状態と一致した時に処理を実行する
     } else {
       // 上記状態でない時に処理を実行する
     }
});

デバイスの向きを検知する

デバイスが横向きになった時に「landscape」という文字列をダイアログ表示し、縦向きになった時に「portrait」という文字列をダイアログ表示する例です。

window.matchMedia('(orientation: landscape)').addEventListener('change', function(e) {
     if(e.matches) {
       // デバイスが横向きになった時、処理を実行する
       alert('landscape');
     } else {
       // // デバイスが縦向きになった時、処理を実行する
       alert('portrait');
     }
});

デバイス幅を検知する

デバイス幅が600px以下の時はテキストの色を赤色、600pxを超えた時は青色にする例です。

<div id="text">テキスト</div>

const mediaQueryList = window.matchMedia('(max-width: 600px)');
const text = document.getElementById('text');
const changeTextColor = (e) => {
  if (e.matches) {
    text.style.color = 'red';
  } else {
    text.style.color = 'blue';
  }
}
changeTextColor(mediaQueryList);
mediaQueryList.addEventListener('change', changeTextColor);

関連記事