Venster matchMedia()
voorbeeld 1
Is het scherm/viewport groter dan 700 pixels breed:
if (window.matchMedia("(max-width: 700px)").matches) {
// Viewport is less or equal to 700 pixels wide
} else {
// Viewport is greater than 700 pixels wide
}
Definitie en gebruik
De matchMedia()
methode retourneert een MediaQueryList met de resultaten van de query.
Zie ook:
Mediavragen
De mediaquery's van de matchMedia()
methode kunnen elk van de mediafuncties van de
CSS @media-regel zijn, zoals min-height, min-width, oriëntatie, enz.
Voorbeelden
matchMedia("(max-height: 480px)").matches);
matchMedia("(max-width: 640px)").matches);
Syntaxis
window.matchMedia(mediaQuery)
Parameters:
Parameter | Description |
mediaQuery | Required. A string representing a media query. |
Winstwaarde
Type | Beschrijving |
Een voorwerp | Een MediaQueryList-object met de resultaten van de mediaquery. |
Voorbeelden uitgelegd
Het eerste voorbeeld op deze pagina voert een mediaquery uit en vergelijkt deze met de huidige vensterstatus.
Als u responsieve mediaquery 's wilt uitvoeren wanneer de status van het venster verandert, voegt u een gebeurtenislistener toe aan het MediaQueryList-object (zie "Meer voorbeelden" hieronder):
Meer voorbeelden
Als het kijkvenster kleiner of gelijk is aan 500 pixels breed, stelt u de achtergrondkleur in op geel, anders op roze:
// Create a match function
function myFunction(x) {
if (x.matches) {
document.body.style.backgroundColor = "yellow";
} else {
document.body.style.backgroundColor = "pink";
}
}
// // Create a MediaQueryList object
const mmObj = window.matchMedia("(max-width: 700px)")
// Call the match function at run time:
myFunction(mmObj);
// Add the match function as a listener for state changes:
mmObj.addListener(myFunction);
Browserondersteuning
matchMedia()
wordt ondersteund in alle moderne browsers:
Chrome | IE | Edge | Firefox | Safari | Opera |
Yes | 11 | Yes | Yes | Yes | Yes |