{{APIRef("CSSOM View")}}{{SeeCompatTable}}
A MediaQueryList
object maintains a list of media queries on a {{domxref("document")}}, and handles sending notifications to listeners when the media queries on the document change.
This makes it possible to observe a document to detect when its media queries change, instead of polling the values periodically, if you need to programmatically detect changes to the values of media queries on a document.
Method overview
void addListener(MediaQueryListListener listener); |
void removeListener(MediaQueryListListener listener); |
Properties
Property | Type | Description |
matches |
boolean |
true if the {{domxref("document")}} currently matches the media query list; otherwise false . Read only. |
media |
DOMString |
The serialized media query list. |
Methods
addListener()
Adds a new listener to the media query list. If the specified listener is already in the list, this method has no effect.
void addListener( MediaQueryListListener listener );
Parameter (for addListener method)
listener
- The {{domxref("MediaQueryListListener")}} to invoke when the media query's evaluated result changes.
removeListener()
Removes a listener from the media query list. Does nothing if the specified listener isn't already in the list.
void removeListener( MediaQueryListListener listener );
Parameter (for removeListener method)
listener
- The {{domxref("MediaQueryListListener")}} to stop calling on changes to the media query's evaluated result.
Specifications
Specification | Status | Comment |
---|---|---|
{{SpecName("CSSOM View", "#the-mediaquerylist-interface", "MediaQueryList")}} | {{Spec2("CSSOM View")}} | Initial definition |
Browser compatibility
{{CompatibilityTable}}
Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|
Basic support | 9 | {{CompatGeckoDesktop("6.0")}} | 10 | 12.1 | 5 |
Feature | Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|
Basic support | {{CompatUnknown}} | {{CompatUnknown}} | {{CompatUnknown}} | {{CompatUnknown}} | {{CompatUnknown}} |
See also
- Media queries
- Using media queries from code
- {{domxref("window.matchMedia()")}}
- {{domxref("MediaQueryListListener")}}