JavaScript MediaQueryList API
- 前のページ API History
- 次のページ API Storage
MediaQueryList オブジェクト
MediaQueryList オブジェクトがメディアクエリからの情報を保存します。
MediaQueryList オブジェクトはウィンドウオブジェクトの属性。
MediaQueryList オブジェクトは以下のようにアクセスできます:
window.matchMedia()
または、以下でアクセスできます: matchMedia()
:
例
const mqlObj = window.matchMedia(); const mqlObj = matchMedia();
参照:
MediaQueryList 属性
属性 | 説明 |
---|---|
matches | ボルン値。ドキュメントがクエリと一致する場合 true 、それ以外の場合 false |
media | 文字列値。メディアクエリ(リスト) |
MediaQueryList メソッド
メソッド | 説明 |
---|---|
addListener() | 新しいリスナー関数を追加し、メディアクエリの評価結果が変更されるたびにその関数を実行します |
removeListener() |
先に追加されたリスナー関数をメディアクエリリストから削除します 指定されたリスナーがリストにない場合、何も実行しません |
メディアクエリ
matchMedia()
メディアクエリの方法は以下の通りです CSS @media ルール のメディア特性、例えば min-height、min-width、orientation など
例
matchMedia("(max-height: 480px)").matches); matchMedia("(max-width: 640px)").matches);
メディアタイプ
値 | 説明 |
---|---|
all | デフォルト。すべてのメディアタイプのデバイスに使用 |
プリンタに使用 | |
screen | コンピューターのスクリーン、タブレット、スマートフォンなどに使用 |
speech | ページを大声で「読み上げる」ためのスクリーンリーダー |
メディア特性
値 | 説明 |
---|---|
any-hover | ユーザーが要素上にマウスをホバーさせることを許可する入力メカニズムが利用可能か? (Media Queries Level 4に追加)。 |
any-pointer | どのような入力メカニズムが利用可能か、例えばタッチデバイスであればその精度はどうか? (Media Queries Level 4に追加)。 |
aspect-ratio | ビューポートの横幅と高さの比率 |
color | 出力デバイスの各色成分のビット数 |
color-gamut | ユーザーエージェントおよび出力デバイスがサポートする色の範囲 (Media Queries Level 4に追加) |
color-index | デバイスが表示できる色の数。 |
grid | デバイスはグリッドですか、それともビットマップですか。 |
height | 視口の高さ。 |
hover | 主要な入力メカニズムがユーザーに要素上にマウスをホバーさせることを許可していますか? (Media Queries Level 4に追加) |
inverted-colors | ブラウザまたはベースラインのオペレーティングシステムが色を反転していますか? (Media Queries Level 4に追加)。 |
light-level | 現在の環境光レベル(Media Queries Level 4に追加)。 |
max-aspect-ratio | 表示エリアの最大纵横比。 |
max-color | 出力デバイスの各色成分の最大ビット数。 |
max-color-index | デバイスが表示できる最大の色数。 |
max-height | 表示エリアの最大高さ、例えばブラウザのウィンドウ。 |
max-monochrome | モノクロ(グレースケール)デバイス上の各「色」の最大ビット数。 |
max-resolution | デバイスの最大解像度、dpiまたはdpcmを使用。 |
max-width | 表示エリアの最大幅、例えばブラウザのウィンドウ。 |
min-aspect-ratio | 表示エリアの最小纵横比。 |
min-color | 出力デバイスの各色成分の最小ビット数。 |
min-color-index | デバイスが表示できる最小の色数。 |
min-height | 表示エリアの最小高さ、例えばブラウザのウィンドウ。 |
min-monochrome | モノクロ(グレースケール)デバイス上の各「色」の最小ビット数。 |
min-resolution | デバイスの最小解像度、dpiまたはdpcmを使用。 |
min-width | 表示エリアの最小幅、例えばブラウザのウィンドウ。 |
monochrome | モノクロ(グレースケール)デバイス上の各「色」のビット数。 |
orientation | 視口の方向(横方向または縦方向モード)。 |
overflow-block | 出力デバイスは、ブロック軸に溢れた視口の内容をどのように処理しますか(Media Queries Level 4に追加)。 |
overflow-inline | インライン軸に溢れた視口の内容をスクロールできますか(Media Queries Level 4に追加)。 |
pointer | 主要な入力メカニズムは指先デバイスですか?それとも、その正確度はどうですか? (Media Queries Level 4に追加)。 |
resolution | 出力デバイスの解像度、dpiまたはdpcmを使用。 |
scan | 出力デバイスのスキャンプロセス。 |
scripting | スクリプト(例えば JavaScript)を使用できるかどうか?(Media Queries Level 4 で追加) |
update | 出力デバイスが内容の外観をどれだけ早く変更できるか(Media Queries Level 4 で追加)。 |
width | ビューポート幅。 |
- 前のページ API History
- 次のページ API Storage