The MediaQueryListEvent object stores information on the changes that have happened to a MediaQueryList object — instances are available as the event object on a function referenced by a MediaQueryList.onchange property or MediaQueryList.addEvent() call.


 Creates a new MediaQueryListEvent instance.


The MediaQueryListEvent interface inherits properties from its parent interface, Event.

MediaQueryListEvent.matches Read only
 A Boolean that returns true if the document currently matches the media query list, or false if not. Read only
 A DOMString representing a serialized media query.


The MediaQueryListEvent interface inherits methods from its parent interface, Event.


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

function screenTest(e) {
  if (e.matches) {
    /* the viewport is 600 pixels wide or less */
    para.textContent = 'This is a narrow screen — less than 600px wide.'; = 'red';
  } else {
    /* the viewport is more than than 600 pixels wide */
    para.textContent = 'This is a wide screen — more than 600px wide.'; = 'blue';



Specification Status Comment
CSS Object Model (CSSOM) View Module
The definition of 'MediaQueryListEvent' in that specification.
Working Draft Initial definition

Browser compatibility

FeatureChromeEdgeFirefoxInternet ExplorerOperaSafari
Basic support Yes ?55 No Yes ?
MediaQueryListEvent() constructor Yes ?55 No Yes ?
matches Yes ?55 No Yes ?
media Yes ?55 No Yes ?
FeatureAndroid webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
Basic support No Yes ?55 Yes ? Yes
MediaQueryListEvent() constructor No Yes ?55 Yes ? Yes
matches No Yes ?55 Yes ? Yes
media No Yes ?55 Yes ? Yes

See also

Document Tags and Contributors

Contributors to this page: fscholz, chrisdavidmills
Last updated by: fscholz,