Window.matchMedia()
Summary
Returns a new MediaQueryList
object representing the parsed results of the specified media query string.
Syntax
JavaScript
Copy Code
mql = window.matchMedia(mediaQueryString)
where mediaQueryString
is a string representing the media query for which to return a new MediaQueryList
object.
Example
JavaScript
Copy Code
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
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 | 6.0 (6.0) | No support | 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/api/window/matchmedia