Testen von Media Queries programmatisch
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since Juli 2015.
Das DOM bietet Funktionen, mit denen die Ergebnisse einer Media Query programmatisch über das MediaQueryList-Interface und dessen Methoden und Eigenschaften getestet werden können. Sobald Sie ein MediaQueryList-Objekt erstellt haben, können Sie das Ergebnis der Abfrage überprüfen oder Benachrichtigungen erhalten, wenn sich das Ergebnis ändert.
Erstellen einer Media Query-Liste
Bevor Sie die Ergebnisse einer Media Query auswerten können, müssen Sie das MediaQueryList-Objekt erstellen, das die Abfrage darstellt. Verwenden Sie dazu die Methode window.matchMedia.
Zum Beispiel, um eine Abfrageliste einzurichten, die bestimmt, ob sich das Gerät in einer Quer- oder Hochformat-Ausrichtung befindet:
const mediaQueryList = window.matchMedia("(orientation: portrait)");
Überprüfung des Ergebnisses einer Abfrage
Sobald Sie Ihre Media Query-Liste erstellt haben, können Sie das Ergebnis der Abfrage überprüfen, indem Sie den Wert der Eigenschaft matches betrachten:
if (mediaQueryList.matches) {
/* The viewport is currently in portrait orientation */
} else {
/* The viewport is not currently in portrait orientation, therefore landscape */
}
Empfangen von Abfragebenachrichtigungen
Wenn Sie fortlaufend über Änderungen des ausgewerteten Ergebnisses der Abfrage informiert werden müssen, ist es effizienter, einen Listener zu registrieren, als das Abfrageergebnis abzufragen. Dazu rufen Sie die Methode addEventListener() am MediaQueryList-Objekt auf, mit einer Callback-Funktion, die aufgerufen wird, wenn sich der Status der Media Query ändert (z. B. geht der Test der Media Query von true zu false über):
// Create the query list.
const mediaQueryList = window.matchMedia("(orientation: portrait)");
// Define a callback function for the event listener.
function handleOrientationChange(mql) {
// …
}
// Run the orientation change handler once.
handleOrientationChange(mediaQueryList);
// Add the callback function as a listener to the query list.
mediaQueryList.addEventListener("change", handleOrientationChange);
Dieser Code erstellt die Abfrageliste zur Ausrichtungstestung und fügt einen Ereignis-Listener hinzu. Nachdem der Listener definiert wurde, rufen wir ihn auch direkt auf. Dadurch wird unser Listener Anpassungen basierend auf der aktuellen Ausrichtung des Geräts vornehmen; ansonsten könnte unser Code annehmen, dass sich das Gerät beim Start im Hochformat befindet, selbst wenn es sich tatsächlich im Querformat befindet.
Die handleOrientationChange()-Funktion würde das Ergebnis der Abfrage betrachten und das behandeln, was wir bei einer Änderung der Ausrichtung tun müssen:
function handleOrientationChange(evt) {
if (evt.matches) {
/* The viewport is currently in portrait orientation */
} else {
/* The viewport is currently in landscape orientation */
}
}
Oben definieren wir den Parameter als evt — ein Ereignisobjekt vom Typ MediaQueryListEvent, das auch die Eigenschaften media und matches enthält, sodass Sie diese Merkmale der MediaQueryList direkt abfragen oder auf das Ereignisobjekt zugreifen können.
Beenden von Abfragebenachrichtigungen
Um keine Benachrichtigungen mehr über Änderungen am Wert Ihrer Media Query zu erhalten, rufen Sie removeEventListener() auf der MediaQueryList auf und übergeben Sie den Namen der zuvor definierten Callback-Funktion:
mediaQueryList.removeEventListener("change", handleOrientationChange);
Spezifikationen
| Specification |
|---|
| CSSOM View Module # the-mediaquerylist-interface |
Browser-Kompatibilität
Loading…