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 の定義
草案 初回定義

ブラウザーの互換性

BCD tables only load in the browser

関連情報