Testen von Media Queries programmatisch

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

Zum Beispiel, um eine Abfrageliste einzurichten, die bestimmt, ob das Gerät im Quer- oder Hochformat ist:

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 ihrer 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 des ausgewerteten Ergebnisses der Abfrage informiert werden müssen, ist es effizienter, einen Listener zu registrieren, anstatt das Ergebnis der Abfrage abzufragen. Dafür rufen Sie die addEventListener()-Methode auf dem MediaQueryList-Objekt auf und übergeben eine Callback-Funktion, die aufgerufen wird, wenn sich der Status der Media Query ändert (z.B. der Media Query-Test geht von true zu false):

// 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 Prüfung der Ausrichtung und fügt ihr einen Event-Listener hinzu. Nachdem der Listener definiert wurde, rufen wir ihn auch direkt auf. So passt unser Listener sich der aktuellen Geräteausrichtung an; andernfalls könnte unser Code davon ausgehen, dass sich das Gerät im Hochformat befindet, auch wenn es tatsächlich im Querformat ist.

Die Funktion handleOrientationChange() würde das Ergebnis der Abfrage betrachten und alles Notwendige bei einer Änderung der Ausrichtung erledigen:

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. Sie können diese Funktionen der MediaQueryList direkt abfragen oder auf das Ereignisobjekt zugreifen.

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

mediaQueryList.removeEventListener("change", handleOrientationChange);

• Media Queries
• CSS Media Queries Modul
• CSS Object Model Modul
• window.matchMedia()
• MediaQueryList
• MediaQueryListEvent