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);

ブラウザの互換性

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

機能 Chrome Firefox (Gecko) Internet Explorer Opera Safari
基本サポート 9 6.0 (6.0) 10 ? 5.1
機能 Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
基本サポート ? ? ? ? 5

関連情報

ドキュメントのタグと貢献者

タグ: 
 このページの貢献者: ethertank, yyss
 最終更新者: ethertank,