Widely available Supported across all major browsers. Safe to use in production.

matchMedia

The Window interface's matchMedia() method returns a new MediaQueryList object that can then be used to determine if the document matches the media query string, as well as to monitor the document to detect when it matches (or stops matching) that media query.

Display and Navigation

Browser support

Feature Desktop Mobile
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
matchMedia
9
12
6
5.1
18
5
MediaQueryList

A MediaQueryList object stores information on a media query applied to a document, with support for both immediate and event-driven matching against the state of the document.
9
12
6
5.1
18
5
change_event

The change event of the MediaQueryList interface fires when the status of media query support changes.
39
79
55
14
39
14
EventTarget_inheritance

`MediaQueryList` inherits `EventTarget`
39
16
55
14
39
14
matches

The matches read-only property of the MediaQueryList interface is a boolean value that returns true if the document currently matches the media query list, or false if not.
9
12
6
5.1
18
5
media

The media read-only property of the MediaQueryList interface is a string representing a serialized media query.
9
12
6
5.1
18
5
MediaQueryListEvent

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.change_event event.
39
79
55
14
39
14
matches

The matches read-only property of the MediaQueryListEvent interface is a boolean value that is true if the document currently matches the media query list, or false if not.
39
79
55
14
39
14
media

The media read-only property of the MediaQueryListEvent interface is a string representing a serialized media query.
39
79
55
14
39
14
MediaQueryListEvent

The MediaQueryListEvent() constructor creates a new MediaQueryListEvent object.
39
79
55
14
39
14
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)

Syntax

JAVASCRIPT 
matchMedia(mediaQueryString)

Use cases

  • Using matchMedia

    The Window interface's matchMedia() method

Cautions

  • May not be supported in older browsers.

Implementation notes

  • Some APIs require a secure context (HTTPS) or user activation. Check the requirements before use.

Related links