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
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) | Not supported | 12.1 | 5 |
See also
Document Tags and Contributors
Tags:
Contributors to this page: Sebastianz, jswisher, chuck, fscholz, cpigat, teoli, LibreGeekingKid, Sheppy, RudolphGottesheim, kohei.yoshino, webinista, ethertank, Sir_Pepe, Marcoos, leaverou, robflaherty, Kohei, paul.irish
Last updated by:
Sebastianz,