Window: matchMedia() Methode

Syntax

matchMedia(mediaQueryString)

Parameter

mediaQueryString

Eine Zeichenkette, die die Media Query angibt, die in ein MediaQueryList geparst werden soll.

Wie in CSS muss jede Medienfunktion innerhalb von Klammern in dem Ausdruck eingeschlossen 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 eingeschlossen werden.

Rückgabewert

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

Verwendungshinweise

Sie können die zurückgegebene Media Query verwenden, um sowohl sofortige als auch ereignisgesteuerte Überprüfungen durchzuführen, um zu sehen, ob das Dokument die Media Query erfüllt.

Um eine einmalige, sofortige Überprüfung durchzuführen, ob das Dokument die Media Query erfüllt, betrachten Sie den Wert der matches Eigenschaft, die true ist, wenn das Dokument die Anforderungen der Media Query erfüllt.

Wenn Sie fortlaufend informiert werden möchten, ob das Dokument die Media Query erfüllt, können Sie stattdessen das change Ereignis beobachten, das an das Objekt gesendet wird. Es gibt ein gutes Beispiel dafür im Artikel über Window.devicePixelRatio.

Beispiele

Dieses Beispiel führt die Media Query (width <= 600px) aus und zeigt den Wert der matches Eigenschaft des resultierenden MediaQueryList in einem <span> an; als Ergebnis wird die Ausgabe "true" sein, wenn der Viewport weniger als oder genau 600 Pixel breit ist und "false" sein, wenn das Fenster breiter ist.

JavaScript

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

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

Der JavaScript-Code übergibt die Media Query, die abgeglichen werden soll, an matchMedia(), um sie zu kompilieren, und setzt dann den innerText des <span> auf den Wert der matches Eigenschaft der Ergebnisse, um anzuzeigen, ob das Dokument die Media Query erfüllt, zu dem Zeitpunkt, an dem die Seite geladen wurde.

HTML

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

Ein einfaches <span>, um die Ausgabe zu empfangen.

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

Ergebnis

Sehen Sie Testing media queries programmatically für zusätzliche Codebeispiele.

Spezifikationen

Browser-Kompatibilität

Siehe auch

• Media Queries
• Verwendung von Media Queries im Code
• MediaQueryList