matches
は MediaQueryList
インターフェイスの読み取り専用プロパティで、 Boolean
であり、文書が現在メディアクエリリストと一致している場合は true
を返し、一致していない場合は false
を返します。
matches
の値が変化した場合は、 MediaQueryList
で発生する change
イベントを監視することで通知を受けることができます。
構文
var matches = <varm>MediaQueryList.matches;
値
例
この例では orientation
メディア特性を使用したメディアクエリを作成することにより、ビューポートの向きの変化を検出します。
function addMQListener(mq, callback) {
if (mq.addEventListener) {
mq.addEventListener("change", callback);
} else {
mq.addListener(callback);
}
}
addMQListener(window.matchMedia("(orientation:landscape)"),
event => {
if (event.matches) {
/* 横向きの画面になった */
} else {
/* 縦向きの画面になった */
}
}
);
仕様書
仕様書 | 状態 | 備考 |
---|---|---|
CSS Object Model (CSSOM) View Module matches の定義 |
草案 | 編集者草稿 |
ブラウザーの互換性
BCD tables only load in the browser
このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 https://github.com/mdn/browser-compat-data をチェックアウトしてプルリクエストを送信してください。