MediaQueryList.media

mediaMediaQueryList インターフェイスの読取専用プロパティであり、 DOMString でシリアライズされたメディアクエリを表します。

構文

var media = MediaQueryList.media;

DOMString で、シリアライズされたメディアクエリあを表します。

この例では、 (max-width: 600px) のメディアクエリを実行し、 MediaQueryListmedia プロパティの結果の値を <span> の中に表示します。

JavaScript

let mql = window.matchMedia('(max-width: 600px)');

document.querySelector(".mq-value").innerText = mql.media;

この JavaScript コードは一致させるメディアクエリを単に matchMedia() に渡してコンパイルし、それから <span>innerTextmedia プロパティの結果の値を設定します。

HTML

<span class="mq-value"></span>

シンプルな <span> は出力を受け取るためのものです。

結果

仕様書

仕様書 状態 備考
CSS Object Model (CSSOM) View Module
media の定義
草案 初回定義

ブラウザーの互換性

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
mediaChrome 完全対応 9Edge 完全対応 12Firefox 完全対応 6IE 完全対応 10Opera 完全対応 12.1Safari 完全対応 5.1WebView Android 完全対応 ありChrome Android 完全対応 18Firefox Android 完全対応 ありOpera Android 完全対応 ありSafari iOS 完全対応 5Samsung Internet Android 完全対応 1.0

凡例

完全対応  
完全対応

関連情報