JavaScript MediaQueryList API

MediaQueryList オブジェクト

MediaQueryList オブジェクトがメディアクエリからの情報を保存します。

MediaQueryList オブジェクトはウィンドウオブジェクトの属性。

MediaQueryList オブジェクトは以下のようにアクセスできます:

window.matchMedia() または、以下でアクセスできます: matchMedia():

const mqlObj = window.matchMedia();
const mqlObj = matchMedia();

自分で試してみてください

参照:

window.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 デフォルト。すべてのメディアタイプのデバイスに使用
print プリンタに使用
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 ビューポート幅。