window.matchMedia
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2015年7月.
概要
指定された メディアクエリー文字列のパース結果を表す、新しい MediaQueryList オブジェクトを返し��す。
構文
mql = window.matchMedia(mediaQueryString)
mediaQueryString は、新しい MediaQueryList オブジェクトを返すための、メディアクエリー文字列です。
例
js
if (window.matchMedia("(min-width: 400px)").matches) {
/* ビューポートの幅が 400 ピクセル以上の場合のコードをここに */
} else {
/* ビューポートの幅は 400 ピクセル未満の場合のコードをここに */
}
このコードでは、ウィンドウが非常に狭いときに、何か別の処理を行うことができます。
他にも『コード内でのメディアクエリーの使用』にいくつか例があります。
仕様書
| Specification |
|---|
| CSSOM View Module # dom-window-matchmedia |