概要
指定された メディアクエリ文字列のパース結果を表す、新しい MediaQueryList オブジェクトを返します。
構文
mql = window.matchMedia(mediaQueryString)
mediaQueryString は、新しい MediaQueryList オブジェクトを返すための、メディアクエリ文字列です。
例
if (window.matchMedia( "(min-width: 400px)" ).matches) {
/* ビューポートの幅が 400 ピクセル以上の場合のコードをここに */
} else {
/* ビューポートの幅は 400 ピクセル未満の場合のコードをここに */
}
このコードでは、ウィンドウが非常に狭いときに、何か別の処理を行うことができます。
他にも『コード内でのメディアクエリの使用』にいくつか例があります。
仕様
| 仕様書 | 策定状況 | コメント |
|---|---|---|
| CSS Object Model (CSSOM) View Module Window.matchMedia() の定義 |
草案 | 初期定義 |
ブラウザ互換性
現在、互換性データを可読形式の JSON フォーマットに置き換えているところです。
この互換性一覧は古い形式を使っており、これに含まれるデータの置き換えが済んでいません。
手助けしていただける場合は、こちらから！
| 機能 | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|
| 基本サポート | 9 | 6.0 (6.0) | 10 | 12.1 | 5.1 |
| 機能 | Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|
| 基本サポート | 3.0 | 6.0 (6.0) | 未サポート | 12.1 | 5 |