スクリプトからのメディアクエリの使用

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

メディアクエリリストを作成する

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

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

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

クエリの結果を確認する

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

if (mql.matches) {
  /* The device is currently in portrait orientation */
} else {
  /* The device is currently in landscape orientation */
}

クエリの通知を受け取る

クエリの評価結果の変化を継続的に意識する必要がある場合は、クエリの結果をポーリングするよりもリスナを登録することが効率的です。リスナを登録するには MediaQueryListListener インタフェースを実装するオブザーバを定義する、MediaQueryList オブジェクトの addListener() メソッドを呼び出します:

var mql = window.matchMedia("(orientation: portrait)");
mql.addListener(handleOrientationChange);
handleOrientationChange(mql); 

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

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

function handleOrientationChange(mql) {
  if (mql.matches) {
    /* The device is currently in portrait orientation */
  } else {
    /* The device is currently in landscape orientation */
  }
}

クエリの通知を終了する

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

mql.removeListener(handleOrientationChange);

ブラウザの互換性

関連情報

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