Testing media queries
This is an experimental technology
Because this technology's specification has not stabilized, check the compatibility table for usage in various browsers. Also note that the syntax and behavior of an experimental technology is subject to change in future versions of browsers as the specification changes.
The DOM provides features that make it possible to test the results of a media query programmatically. This is done using the MediaQueryList
interface and its methods and properties. Once you've created a MediaQueryList
object, you can check the result of the query or, alternatively, receive notifications automatically when the result changes.
Creating a media query list
Before you can evaluate the results of a query, you need to create the MediaQueryList
object representing the media query. To do this, use the window.matchMedia
method.
For example, if you want to set up a query list that determines whether the device is in landscape or portrait orientation, you can do so like this:
var mql = window.matchMedia("(orientation: portrait)");
Checking the result of a query
Once your media query list has been created, you can check the result of the query by looking at the value of its matches
property, which reflects the result of the query:
if (mql.matches) { /* The viewport is currently in portrait orientation */ } else { /* The viewport is currently in landscape orientation */ }
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, you can call the addListener()
method on the MediaQueryList
object, specifying an observer that implements the MediaQueryListListener
interface:
var mql = window.matchMedia("(orientation: portrait)"); mql.addListener(handleOrientationChange); handleOrientationChange(mql);
This code creates the orientation testing media query list, mql
, then adds a listener to it. Note that after adding the listener, we actually invoke the listener directly once. This lets our listener perform initial adjustments based on the current device orientation (otherwise, if our code assumes the device is in portrait mode but it's actually in landscape mode at startup, we could have inconsistencies).
The handleOrientationChange()
method we implement then would look at the result of the query and handle whatever we need to do on an orientation change:
function handleOrientationChange(mql) { if (mql.matches) { /* The viewport is currently in portrait orientation */ } else { /* The viewport is currently in landscape orientation */ } }
Ending query notifications
When you no longer need to receive notifications about changes to the value of your media query, you can simply call removeListener()
on the MediaQueryList
:
mql.removeListener(handleOrientationChange);
Browser compatibility
Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|
Basic support | 9 | 6.0 (6.0) | 10 | 12.1 | 5.1 |
Feature | Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|
Basic support | 3.0 | ? | 10 | 12.1 | 5 |
See also
License
© 2016 Mozilla Contributors
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-us/docs/web/css/media_queries/testing_media_queries