Summary

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

 

FeatureChromeEdgeFirefoxInternet ExplorerOperaSafari
Basic support9 Yes61012.15.1
FeatureAndroid webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
Basic support ? ? Yes612.15 ?

 

See also