Window: matchMedia() Methode

Syntax

matchMedia(mediaQueryString)

Parameter

mediaQueryString

Ein String, der die Media Query angibt, die in ein MediaQueryList-Objekt geparst werden soll.

Genau wie in CSS muss jede Media Feature in Klammern innerhalb des Ausdrucks eingeschlossen sein. Zum Beispiel: matchMedia("(width <= 600px)") oder matchMedia("(orientation: landscape)") sind korrekt, 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. Nutzen Sie die Eigenschaften und Ereignisse dieses Objekts, um Übereinstimmungen zu erkennen und die Änderungen dieser Übereinstimmungen über die Zeit zu überwachen.

Verwendungshinweise

Sie können die zurückgegebene Media Query sowohl für sofortige als auch für ereignisgesteuerte Überprüfungen verwenden, um festzustellen, ob das Dokument der Media Query entspricht.

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

Wenn Sie ständig informiert werden möchten, ob das Dokument der Media Query entspricht oder nicht, können Sie statt dessen das change-Ereignis beobachten, das an das Objekt übermittelt wird. Im Artikel zu Window.devicePixelRatio gibt es ein gutes Beispiel hierfür.

Beispiele

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

JavaScript

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

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

Der JavaScript-Code übergibt die zu vergleichende Media Query an matchMedia() zur Kompilierung und setzt dann den innerText des <span> auf den Wert der matches-Eigenschaft des Ergebnisses, so dass angezeigt wird, ob das Dokument der Media Query entspricht, zu dem Zeitpunkt, als die Seite geladen wurde.

HTML

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

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

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

Ergebnis

Sehen Sie Testen von Media Queries programmatisch für zusätzliche Codebeispiele.

Spezifikationen

Browser-Kompatibilität

Siehe auch

• Media Queries
• Verwenden von Media Queries aus dem Code
• MediaQueryList