Window: matchMedia()-Methode

Syntax

matchMedia(mediaQueryString)

Parameter

mediaQueryString

Ein String, der den zu parsenden Media Query in ein MediaQueryList angibt.

Genau wie in CSS muss jede Media-Funktion innerhalb des Ausdrucks in Klammern gesetzt werden. Zum Beispiel: matchMedia("(width <= 600px)") oder matchMedia("(orientation: landscape)") funktionieren, während matchMedia("width < 600px") oder matchMedia("orientation: landscape") nicht funktionieren. Schlüsselwörter für Medientypen (all, print, screen) und logische Operatoren (and, or, not, only) müssen nicht in Klammern gesetzt werden.

Rückgabewert

Ein neues MediaQueryList-Objekt für den Media Query. Verwenden Sie die Eigenschaften und Ereignisse dieses Objekts, um Übereinstimmungen zu erkennen und Änderungen dieser Übereinstimmungen im Laufe der Zeit zu überwachen.

Anwendungshinweise

Sie können den zurückgegebenen Media Query verwenden, um sowohl sofortige als auch ereignisgesteuerte Überprüfungen durchzuführen, um festzustellen, ob das Dokument dem Media Query entspricht.

Um eine einmalige, sofortige Überprüfung durchzuführen, ob das Dokument dem Media Query entspricht, achten Sie auf den Wert der matches-Eigenschaft, die true sein wird, wenn das Dokument die Anforderungen des Media Query erfüllt.

Wenn Sie ständig darüber informiert werden müssen, ob das Dokument dem Media Query entspricht oder nicht, können Sie stattdessen das change-Ereignis überwachen, das an das Objekt übermittelt wird. Es gibt ein gutes Beispiel dafür im Artikel zu Window.devicePixelRatio.

Beispiele

Dieses Beispiel führt den Media Query (width <= 600px) aus und zeigt den Wert der matches-Eigenschaft des resultierenden MediaQueryList in einem <span> an. Das Ergebnis wird daher "true" anzeigen, wenn das Ansichtsfenster kleiner oder gleich 600 Pixel breit ist, und "false", wenn das Fenster breiter ist.

JavaScript

let mql = window.matchMedia("(width <= 600px)");

document.querySelector(".mq-value").innerText = mql.matches;

Der JavaScript-Code übergibt den Media Query, der in matchMedia() übereinstimmen soll, um ihn zu kompilieren, und setzt dann die innerText des <span> auf den Wert der matches-Eigenschaft der Ergebnisse, sodass angezeigt wird, ob das Dokument im Moment des Ladens der Seite dem Media Query entspricht.

HTML

<span class="mq-value"></span>

Ein einfaches <span> für die Ausgabe.

.mq-value {
  font:
    18px arial,
    sans-serif;
  font-weight: bold;
  color: #8888ff;
  padding: 0.4em;
  border: 1px solid #ddddee;
}

Ergebnis

Siehe Media Queries programmgesteuert testen für zusätzliche Codebeispiele.

Spezifikationen

Browser-Kompatibilität

Siehe auch

• Media Queries
• Media Queries im Code verwenden
• MediaQueryList