プログラムによるメディアクエリーのテスト

DOM では、メディアクエリーの結果を MediaQueryList インターフェイスおよびそのメソッドやプロパティを用いてプログラムからで調べることができる機能を備えています。 MediaQueryList オブジェクトを作成すると、クエリーの結果を確認したり、結果が変化したときに自動的に通知を受け取ったりすることができます。

メディアクエリーリストの作成

クエリーの結果を評価できるようにするのに先立ち、メディアクエリーを示す MediaQueryList オブジェクトを作成する必要があります。オブジェクトを作成するには、window.matchMedia メソッドを用います。

例えば、端末が横置きか縦置きかを調べるクエリーリストを設定したい場合は、以下のようにします。

const mediaQueryList = window.matchMedia("(orientation: portrait)");

クエリーの結果の確認

メディアクエリーリストが作成されると、その matches プロパティの値を参照することで、クエリーの結果を確認することができます。このプロパティは、クエリーの結果を反映します。

if (mediaQueryList.matches) {
  /* 現在ビューポートが縦長である */
} else {
  /* 現在ビューポートが縦長ではない、すなわち横長である */
}

クエリーの通知の受信

クエリーの評価結果の変化を継続的に意識する必要がある場合は、クエリーの結果をポーリングするよりもリスナーを登録したことが効率的です。このためには、 addListener() メソッドを MediaQueryList オブジェクトに対して呼び出し、メディアクエリーの状態が変化したとき (例えば、メディアクエリーの結果が true から false へ移行した場合) に呼び出されるコールバック関数を設定します。

// クエリーリストを作成する。
const mediaQueryList = window.matchMedia("(orientation: portrait)");

// イベントリスナーのコールバック関数を定義する。
function handleOrientationChange(mql) {
  // ...
}

// 向き変更時のハンドラーを一度実行する。
handleOrientationChange(mediaQueryList);

// コールバック関数をリスナーとしてクエリーリストに追加する。
mediaQueryList.addListener(handleOrientationChange);

このコードでは端末の向き (orientation) を評価するメディアクエリーリストを作成し、次にリスナーを追加しています。リスナーを定義した後、そのリスナーを直接一度呼び出しています。これにより、リスナーが現在の端末の向きを基にして初期状態の調整を行うことができます (そうしないと、コードでは端末の初期状態が縦置きと想定しているが実際は横置きであるような場合に、不整合が発生します)。

次の handleOrientationChange() メソッドで、クエリーの結果の確認や端末の向きが変わったときに必要な処理を行います。

function handleOrientationChange(evt) {
  if (evt.matches) {
    /* 現在ビューポートが縦長 */
  } else {
    /* 現在ビューポートが横長 */
  }
}

上記で、引数を evt — イベントオブジェクトとして定義しています。これは MediaQueryList の新しい実装がイベントリスナーを標準の方法で扱うのでお分かりでしょう。標準外の MediaQueryListListener (en-US) の機構はもう使われませんが、標準のイベントリスナーの設定では、 MediaQueryListEvent (en-US) 型のイベントオブジェクトをコールバック関数の引数として渡します。

このイベントオブジェクトは media (en-US) および matches (en-US) プロパティも含んでおり、 MediaQueryList のこれらの機能に直接アクセスしたり、イベントオブジェクトにアクセスしたりすることができます。

クエリーの通知の終了

メディアクエリーの値の変化について通知を受ける必要がなくなったときは、 removeListener() メソッドを MediaQueryList オブジェクトに対して呼び出してください。

mediaQueryList.removeListener(handleOrientationChange);

ブラウザーの対応

MediaQueryList インターフェイス

BCD tables only load in the browser

関連情報