window.matchMedia

Returns a new MediaQueryList object representing the parsed results of the specified media query string.

Syntax

mql = window.matchMedia(mediaQueryString)

where mediaQueryString is a string representing the media query for which to return a new MediaQueryList object.

Example

if (window.matchMedia("(min-width: 400px)").matches) {
  /* the viewport is at least 400 pixels wide */
} else {
  /* the viewport is less than 400 pixels wide */
}

This code lets you handle things differently when the window is very narrow.

See Using media queries from code for additional examples.

Specifications

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

Browser compatibility

See also

• Media queries
• Using media queries from code
• MediaQueryList
• MediaQueryListListener