The DOM provides features that can test the results of a media query programmatically, via the MediaQueryList interface and its methods and properties. Once you've created a MediaQueryList object, you can check the result of the query or receive notifications when the result changes.

Creating a media query list

Before you can evaluate the results of a media query, you need to create the MediaQueryList object representing the query. To do this, use the window.matchMedia method.

For example, to set up a query list that determines if the device is in landscape or portrait orientation:

var mediaQueryList = window.matchMedia("(orientation: portrait)");

Checking the result of a query

Once you've created your media query list, you can check the result of the query by looking at the value of its matches property:

if (mediaQueryList.matches) {
  /* The viewport is currently in portrait orientation */
} else {
  /* The viewport is not currently in portrait orientation, therefore landscape */
}

Receiving query notifications

If you need to be aware of changes to the evaluated result of the query on an ongoing basis, it's more efficient to register a listener than to poll the query's result. To do this, call the addListener() method on the MediaQueryList object, with a callback function to invoke when the media query status changes (e.g., the media query test goes from true to false):

var mediaQueryList = window.matchMedia("(orientation: portrait)"); // Create the query list.
function handleOrientationChange(mql) { ... } // Define a callback function for the event listener.
mediaQueryList.addListener(handleOrientationChange); // Add the callback function as a listener to the query list.

handleOrientationChange(mediaQueryList); // Run the orientation change handler once.

This code creates the orientation-testing media query list, then adds an event listener to it. After adding the listener, we also call the listener directly. This makes our listener perform adjustments based on the current device orientation; otherwise, our code might assume the device is in portrait mode at startup, even if it's actually in landscape mode.

The handleOrientationChange() function would look at the result of the query and handle whatever we need to do on an orientation change:

function handleOrientationChange(evt) {
  if (evt.matches) {
    /* The viewport is currently in portrait orientation */
  } else {
    /* The viewport is currently in landscape orientation */
  }
}

Above, we define the parameter as evt — an event object. This makes sense because newer implementations of MediaQueryList handle event listeners in a standard way. They no longer use the unusual MediaQueryListListener mechanism, but a standard event listener setup, passing an event object of type MediaQueryListEvent as the argument to the callback function.

This event object also includes the media and matches properties, so you can query these features of the MediaQueryList by directly accessing it, or accessing the event object.

Ending query notifications

To stop receiving notifications about changes to the value of your media query, call removeListener() on the MediaQueryList, passing it the name of the previously-defined callback function:

mediaQueryList.removeListener(handleOrientationChange);

Browser compatibility

MediaQueryList interface

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidiOS SafariSamsung Internet
Basic support
Experimental
Chrome Full support 9Edge Full support YesFirefox Full support 6IE Full support 10Opera Full support 12.1Safari Full support 5WebView Android Full support YesChrome Android Full support 18Edge Mobile Full support YesFirefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
addListenerChrome Full support 9Edge Full support YesFirefox Full support 6IE Full support 10Opera Full support 12.1Safari Full support 5WebView Android ? Chrome Android ? Edge Mobile Full support YesFirefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
matchesChrome Full support 9Edge Full support YesFirefox Full support 6IE Full support 10Opera Full support 12.1Safari Full support 5WebView Android ? Chrome Android ? Edge Mobile Full support YesFirefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
mediaChrome Full support 9Edge Full support YesFirefox Full support 6IE Full support 10Opera Full support 12.1Safari Full support 5WebView Android ? Chrome Android ? Edge Mobile Full support YesFirefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
onchangeChrome Full support YesEdge ? Firefox Full support 55IE No support NoOpera Full support YesSafari ? WebView Android No support NoChrome Android Full support YesEdge Mobile ? Firefox Android Full support 55Opera Android Full support YesSafari iOS ? Samsung Internet Android ?
removeListenerChrome Full support 9Edge Full support YesFirefox Full support 6IE Full support 10Opera Full support 12.1Safari Full support 5WebView Android ? Chrome Android ? Edge Mobile Full support YesFirefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
EventListener objects as parametersChrome No support NoEdge ? Firefox Full support 55IE No support NoOpera No support NoSafari ? WebView Android No support NoChrome Android No support NoEdge Mobile ? Firefox Android Full support 55Opera Android No support NoSafari iOS ? Samsung Internet Android ?
MediaQueryList inheriting from EventTargetChrome Full support YesEdge Full support 16Firefox Full support 55IE No support NoOpera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesEdge Mobile Full support 16Firefox Android Full support 55Opera Android Full support YesSafari iOS Full support YesSamsung Internet Android ?

Legend

Full support  
Full support
No support  
No support
Compatibility unknown  
Compatibility unknown
Experimental. Expect behavior to change in the future.
Experimental. Expect behavior to change in the future.

See also