The change
event of the MediaQueryList
interface fires when the status of media query support changes.
MediaQueryList: change event
Syntax
Use the event name in methods like addEventListener()
, or set an event handler property.
addEventListener('change', event => { }); onchange = event => { };
Event type
An MediaQueryListEvent
. Inherits from Event
.
Event properties
The MediaQueryListEvent
interface inherits properties from its parent interface, Event
.
-
MediaQueryListEvent.matches
Read only -
A boolean value that is
true
if thedocument
currently matches the media query list, orfalse
if not. -
MediaQueryListEvent.media
Read only -
A
DOMString
representing a serialized media query.
Example
var mql = window.matchMedia('(max-width: 600px)'); mql.onchange = (e) => { if (e.matches) { /* the viewport is 600 pixels wide or less */ console.log('This is a narrow screen — less than 600px wide.') } else { /* the viewport is more than 600 pixels wide */ console.log('This is a wide screen — more than 600px wide.') } }
Specifications
Specification |
---|
CSSOM View Module # dom-mediaquerylist-onchange |
Browser compatibility
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet | |
change_event |
45
|
79
|
55
|
No
|
32
|
14
|
45
|
45
|
55
|
32
|
14
|
5.0
|
See also
© 2005–2021 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/MediaQueryList/change_event