Media Queries programmatisch testen

Bevor Sie die Ergebnisse einer Media Query auswerten können, müssen Sie das MediaQueryList-Objekt erstellen, das die Abfrage darstellt. Dazu verwenden Sie die Methode window.matchMedia.

Zum Beispiel, um eine Abfrageliste einzurichten, die bestimmt, ob sich das Gerät im Hoch- oder Querformat befindet:

const mediaQueryList = window.matchMedia("(orientation: portrait)");

Sobald Sie Ihre Media Query Liste erstellt haben, können Sie das Ergebnis der Abfrage überprüfen, indem Sie den Wert der matches-Eigenschaft betrachten:

if (mediaQueryList.matches) {
  /* The viewport is currently in portrait orientation */
} else {
  /* The viewport is not currently in portrait orientation, therefore landscape */
}

Wenn Sie laufend über Änderungen am ausgewerteten Ergebnis der Abfrage informiert werden müssen, ist es effizienter, einen Listener zu registrieren, als das Ergebnis der Abfrage permanent abzufragen. Dazu rufen Sie die Methode addEventListener() auf dem MediaQueryList-Objekt auf und übergeben eine Callback-Funktion, die aufgerufen wird, wenn sich der Status der Medienabfrage ändert (z.B. wenn der Medientest von true zu false wechselt):

// 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 Media Query Liste zur Orientierungstestung und fügt ihr einen Event Listener hinzu. Nachdem der Listener definiert ist, rufen wir ihn auch direkt auf. So kann unser Listener Anpassungen basierend auf der aktuellen Geräteorientierung durchführen; andernfalls könnte unser Code annehmen, dass das Gerät im Hochformat startet, selbst wenn es tatsächlich im Querformat ist.

Die Funktion handleOrientationChange() würde das Ergebnis der Abfrage betrachten und das tun, was bei einer Änderung der Orientierung erforderlich ist:

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 Event-Objekt vom Typ MediaQueryListEvent, das auch die Eigenschaften media und matches enthält, sodass Sie diese Funktionen der MediaQueryList abfragen können, indem Sie direkt darauf zugreifen oder auf das Event-Objekt zugreifen.

Um keine Benachrichtigungen mehr über Änderungen am Wert Ihrer Media Query zu erhalten, rufen Sie removeEventListener() auf dem MediaQueryList-Objekt auf und übergeben den Namen der zuvor definierten Callback-Funktion:

mediaQueryList.removeEventListener("change", handleOrientationChange);

• Media Queries
• CSS Medienabfragen-Modul
• CSS Objektmodell-Modul
• window.matchMedia()
• MediaQueryList
• MediaQueryListEvent