MediaQueryListEvent.matches
The matches
read-only property of the
MediaQueryListEvent
interface is a boolean value that is
true
if the document
currently matches the media query list,
or false
if not.
Value
A boolean value; returns true
if the document
currently matches the media query list, false
if not.
Examples
var mql = window.matchMedia('(max-width: 600px)');
function screenTest(e) {
if (e.matches) {
/* the viewport is 600 pixels wide or less */
para.textContent = 'This is a narrow screen — less than 600px wide.';
document.body.style.backgroundColor = 'red';
} else {
/* the viewport is more than 600 pixels wide */
para.textContent = 'This is a wide screen — more than 600px wide.';
document.body.style.backgroundColor = 'blue';
}
}
mql.addListener(screenTest);
Specifications
Specification |
---|
CSSOM View Module # dom-mediaquerylistevent-matches |
Browser compatibility
BCD tables only load in the browser