MediaQueryList: matches プロパティ
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
Please take two minutes to fill out our short survey.
matches は MediaQueryList インターフェイスの読み取り専用プロパティで、論理値です。 document が現在メディアクエリーリストと一致している場合は true を返し、一致していない場合は false を返します。
matches の値が変化した場合は、 MediaQueryList で発生する change イベントを監視することで通知を受けることができます。
値
boolean。 document が現在メディアクエリーのリストに一致していれば true を返し、そうでなければ false を返します。
例
この例では orientation メディア特性を使用したメディアクエリーを作成することにより、ビューポートの向きの変化を検出します。
js
const mql = window.matchMedia("(orientation:landscape)");
mql.addEventListener("change", (event) => {
if (event.matches) {
/* 横向きの画面になった */
} else {
/* 縦向きの画面になった */
}
});
仕様書
| Specification |
|---|
| CSSOM View Module # dom-mediaquerylist-matches |