Fenster matchMedia()
Beispiel 1
Ist der Bildschirm/Viewport breiter als 700 Pixel:
if (window.matchMedia("(max-width: 700px)").matches) {
// Viewport is less or equal to 700 pixels wide
} else {
// Viewport is greater than 700 pixels wide
}
Definition und Verwendung
Die matchMedia()
Methode gibt eine MediaQueryList mit den Ergebnissen der Abfrage zurück.
Siehe auch:
Medien-Anfragen
Die Medienabfragen der matchMedia()
Methode können alle Medienfunktionen der
CSS-@media -Regel sein, wie z. B. Mindesthöhe, Mindestbreite, Ausrichtung usw.
Beispiele
matchMedia("(max-height: 480px)").matches);
matchMedia("(max-width: 640px)").matches);
Syntax
window.matchMedia(mediaQuery)
Parameter
Parameter | Description |
mediaQuery | Required. A string representing a media query. |
Rückgabewert
Typ | Beschreibung |
Ein Objekt | Ein MediaQueryList-Objekt mit den Ergebnissen der Medienabfrage. |
Beispiele erklärt
Das erste Beispiel auf dieser Seite führt eine Medienabfrage aus und vergleicht sie mit dem aktuellen Fensterstatus.
Um bei jeder Änderung des Fensterstatus eine responsive Medienabfrage auszuführen , fügen Sie dem MediaQueryList-Objekt einen Ereignis-Listener hinzu (siehe „Weitere Beispiele“ unten) :
Mehr Beispiele
Wenn das Ansichtsfenster kleiner oder gleich 500 Pixel breit ist, setzen Sie die Hintergrundfarbe auf Gelb, andernfalls auf Rosa:
// 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);
Browser-Unterstützung
matchMedia()
wird in allen modernen Browsern unterstützt:
Chrome | IE | Edge | Firefox | Safari | Opera |
Yes | 11 | Yes | Yes | Yes | Yes |