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

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

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

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

例えば、デバイスが横置きか縦置きかを調べるクエリリストを設定したい場合は、以下のようにしてください:

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

クエリの結果の確認

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

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

クエリの通知の受信

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

var mediaQueryList = window.matchMedia("(orientation: portrait)"); // Create the query list.
function handleOrientationChange(mql) { ... } // イベントリスナーにコールバック関数を定義
mediaQueryList.addListener(handleOrientationChange); // クエリリストにコールバック関数をリスナーとして追加

handleOrientationChange(mediaQueryList); // 画面の向きが変更された時のハンドラーを一度実行。

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

次で実装する handleOrientationChange() メソッドでは、クエリの結果の確認やデバイスの向きが変わったときに必要な処理を行います。

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

上記で、 evt — イベントオブジェクトの引数を定義しています。これは MediaQueryList の新しい実装を扱うイベントリスナーの標準の方法なのでお分かりでしょう。非標準の MediaQueryListListener メカニズムはもう使われませんが、標準のイベントリスナーのセットアップでは、 MediaQueryListEvent のイベントオブジェクトをコールバック関数の引数として渡します。

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

クエリの通知の終了

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

mediaQueryList.removeListener(handleOrientationChange);

ブラウザーの対応

MediaQueryList インターフェイス

関連情報

• メディアクエリ
• window.matchMedia()
• MediaQueryList
• MediaQueryListEvent