MediaQueryList.onchange

onchangeMediaQueryList インターフェイスのプロパティで、 change イベントが発行されたとき、すなわちメディアクエリの対応の状態が変化したときに呼び出される関数を表します。イベントオブジェクトは MediaQueryListEvent のインスタンスであり、古いブラウザーからは後方互換性のために MediaListQuery のインスタンスと解釈されます。

構文

MediaQueryList.onchange = function() { ... };

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

mql.addEventListener( "change", (e) => {
    if (e.matches) {
    /* ビューポートが 600 ピクセル幅以下 */
    console.log('This is a narrow screen — less than 600px wide.')
  } else {
    /* ビューポートが 600 ピクセル幅より広い */
    console.log('This is a wide screen — more than 600px wide.')
  }
})

仕様書

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

ブラウザーの互換性

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
onchangeChrome 完全対応 45Edge 完全対応 ≤79Firefox 完全対応 55IE 未対応 なしOpera 完全対応 ありSafari 完全対応 14WebView Android 完全対応 45Chrome Android 完全対応 45Firefox Android 完全対応 55Opera Android 完全対応 ありSafari iOS 完全対応 14Samsung Internet Android 完全対応 5.0

凡例

完全対応  
完全対応
未対応  
未対応

関連情報