28/2/24, 11:32 Window: matchMedia() method - Web APIs | MDN

Window: matchMedia() method

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.

Syntax
JS

matchMedia(mediaQueryString)

Parameters
mediaQueryString

A string specifying the media query to parse into a MediaQueryList .

Return value
A new MediaQueryList object for the media query. Use this object's properties and events to detect matches and to monitor for changes to
those matches over time.

Usage notes
You can use the returned media query to perform both instantaneous and event-driven checks to see if the document matches the media
query.
To perform a one-time, instantaneous check to see if the document matches the media query, look at the value of the matches property,
which will be true if the document meets the media query's requirements.
If you need to be kept aware of whether or not the document matches the media query at all times, you can instead watch for the change
event to be delivered to the object. There's a good example of this in the article on Window.devicePixelRatio .

Examples
This example runs the media query (max-width: 600px) and displays the value of the resulting MediaQueryList 's matches property in a
<span> ; as a result, the output will say "true" if the viewport is less than or equal to 600 pixels wide, and will say "false" if the window is

wider than that.

JavaScript
JS Play

let mql = window.matchMedia("(max-width: 600px)");

document.querySelector(".mq-value").innerText = mql.matches;

The JavaScript code passes the media query to match into matchMedia() to compile it, then sets the <span> 's innerText to the value of the
results' matches property, so that it indicates whether or not the document matches the media query at the moment the page was loaded.
HTML
HTML Play

<span class="mq-value"></span>

A simple <span> to receive the output.

https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia 1/2
28/2/24, 11:32 Window: matchMedia() method - Web APIs | MDN

Result
Play

false

See Testing media queries programmatically for additional code examples.

Specifications
Specification
CSSOM View Module
# dom-window-matchmedia

Browser compatibility
Report problems with this compatibility data on GitHub

diordnA rof xoferiF

diordnA emorhC

diordnA arepO
emorhC

xoferiF

arepO

irafaS
egdE

Chrome 9 Edge 12 Firefox 6 Opera 12.1 Safari 5.1 Chrome 18 Firefox 6 Opera 12.1 S
matchMedia Android for Android
Android i
Tip: you can click/tap on a cell for more information.
Full support

See also
Media queries
Using media queries from code
MediaQueryList

This page was last modified on Jul 7, 2023 by MDN contributors.

https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia 2/2