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.
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
方法。
For example, to set up a query list that determines if the device is in landscape or portrait orientation:
const mediaQueryList = window.matchMedia("(orientation: portrait)");
Once you've created your media query list, you can check the result of the query by looking at the value of its
matches
特性：
if (mediaQueryList.matches) {
/* The viewport is currently in portrait orientation */
} else {
/* The viewport is not currently in portrait orientation, therefore landscape */
}
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
):
// Create the query list.
const mediaQueryList = window.matchMedia("(orientation: portrait)");
// Define a callback function for the event listener.
function handleOrientationChange(mql) {
// ...
}
// Run the orientation change handler once.
handleOrientationChange(mediaQueryList);
// Add the callback function as a listener to the query list.
mediaQueryList.addListener(handleOrientationChange);
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.
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.
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);
MediaQueryList
interface
| Desktop | Mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
MediaQueryList
|
Chrome 完整支持 9 | Edge 完整支持 12 | Firefox 完整支持 6 | IE 完整支持 10 | Opera 完整支持 12.1 |
Safari
完整支持
5.1
注意事项
|
WebView Android 完整支持 Yes | Chrome Android 完整支持 18 | Firefox Android 完整支持 Yes | Opera Android 完整支持 Yes |
Safari iOS
完整支持
5
注意事项
|
Samsung Internet Android 完整支持 1.0 |
EventListener
objects as parameters
|
Chrome 完整支持 45 | Edge 完整支持 ≤79 | Firefox 完整支持 55 | IE 不支持 No | Opera 不支持 No | Safari ? | WebView Android 完整支持 45 | Chrome Android 完整支持 45 | Firefox Android 完整支持 55 | Opera Android 不支持 No | Safari iOS ? | Samsung Internet Android 完整支持 5.0 |
MediaQueryList
inherits
EventTarget
|
Chrome 完整支持 45 | Edge 完整支持 16 | Firefox 完整支持 55 | IE 不支持 No | Opera 完整支持 Yes | Safari 不支持 No | WebView Android 完整支持 45 | Chrome Android 完整支持 45 | Firefox Android 完整支持 55 | Opera Android 完整支持 Yes | Safari iOS 不支持 No | Samsung Internet Android 完整支持 5.0 |
addListener()
|
Chrome 完整支持 9 | Edge 完整支持 12 | Firefox 完整支持 6 | IE 完整支持 10 | Opera 完整支持 12.1 |
Safari
完整支持
5.1
注意事项
|
WebView Android 完整支持 Yes | Chrome Android 完整支持 18 | Firefox Android 完整支持 Yes | Opera Android 完整支持 Yes |
Safari iOS
完整支持
5
注意事项
|
Samsung Internet Android 完整支持 1.0 |
matches
|
Chrome 完整支持 9 | Edge 完整支持 12 | Firefox 完整支持 6 | IE 完整支持 10 | Opera 完整支持 12.1 | Safari 完整支持 5.1 | WebView Android 完整支持 Yes | Chrome Android 完整支持 18 | Firefox Android 完整支持 Yes | Opera Android 完整支持 Yes | Safari iOS 完整支持 5 | Samsung Internet Android 完整支持 1.0 |
media
|
Chrome 完整支持 9 | Edge 完整支持 12 | Firefox 完整支持 6 | IE 完整支持 10 | Opera 完整支持 12.1 | Safari 完整支持 5.1 | WebView Android 完整支持 Yes | Chrome Android 完整支持 18 | Firefox Android 完整支持 Yes | Opera Android 完整支持 Yes | Safari iOS 完整支持 5 | Samsung Internet Android 完整支持 1.0 |
onchange
|
Chrome 完整支持 45 | Edge 完整支持 ≤79 | Firefox 完整支持 55 | IE 不支持 No | Opera 完整支持 Yes | Safari 完整支持 14 | WebView Android 完整支持 45 | Chrome Android 完整支持 45 | Firefox Android 完整支持 55 | Opera Android 完整支持 Yes | Safari iOS 完整支持 14 | Samsung Internet Android 完整支持 5.0 |
removeListener()
|
Chrome 完整支持 9 | Edge 完整支持 12 | Firefox 完整支持 6 | IE 完整支持 10 | Opera 完整支持 12.1 |
Safari
完整支持
5.1
注意事项
|
WebView Android 完整支持 Yes | Chrome Android 完整支持 18 | Firefox Android 完整支持 Yes | Opera Android 完整支持 Yes |
Safari iOS
完整支持
5
注意事项
|
Samsung Internet Android 完整支持 1.0 |
完整支持
不支持
兼容性未知
见实现注意事项。