Window: matchMedia() Methode

Syntax

matchMedia(mediaQueryString)

Parameter

mediaQueryString

Ein String, der die zu analysierende Media Query in eine MediaQueryList angibt.

Genau wie in CSS muss jedes Medienmerkmal in Klammern innerhalb des Ausdrucks geschrieben 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 geschrieben werden.

Rückgabewert

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

Hinweise zur Verwendung

Sie können die zurückgegebene Media Query verwenden, um sowohl sofortige als auch ereignisgesteuerte Prüfungen durchzuführen, um festzustellen, ob das Dokument der Media Query entspricht.

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

Wenn Sie ständig darüber informiert werden möchten, ob das Dokument der Media Query entspricht oder nicht, 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 resultierenden MediaQueryList-Eigenschaft matches in einem <span>; dementsprechend wird die Ausgabe "true" anzeigen, wenn der Viewport 600 Pixel breit oder weniger ist, und "false" anzeigen, 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 analysierende Media Query an matchMedia(), um sie zu kompilieren, und setzt dann den innerText des <span> auf den Wert der matches-Eigenschaft der Ergebnisse, sodass angezeigt wird, ob das Dokument der Media Query zum Zeitpunkt des Seitenladevorgangs entspricht oder nicht.

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

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

Spezifikationen

Browser-Kompatibilität

Siehe auch

• Media queries
• Using media queries from code
• MediaQueryList