Window: matchMedia()-Methode

Baseline

Weitgehend verfügbar

Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit Juli 2015 browserübergreifend verfügbar.

Vollständige Kompatibilität anzeigen
Mehr erfahren

Die Methode matchMedia() der Window-Schnittstelle gibt ein neues MediaQueryList-Objekt zurück. Mit diesem lässt sich feststellen, ob das document mit einem Media-Query-String übereinstimmt. Außerdem kann damit überwacht werden, wann das Dokument mit dem Media Query übereinstimmt oder nicht mehr übereinstimmt.

Syntax

matchMedia(mediaQueryString)

Parameter

mediaQueryString

Ein String, der das Media Query angibt, das in eine MediaQueryList umgewandelt werden soll.

Wie in CSS muss jedes Media-Feature innerhalb des Ausdrucks in Klammern stehen. Beispielsweise funktionieren matchMedia("(width <= 600px)") und matchMedia("(orientation: landscape)"), während matchMedia("width < 600px") und 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 stehen.

Rückgabewert

Ein neues MediaQueryList-Objekt für das Media Query. Mit den Eigenschaften und Ereignissen dieses Objekts können Sie Übereinstimmungen erkennen und Änderungen daran im Zeitverlauf überwachen.

Verwendungshinweise

Mit dem zurückgegebenen Media Query können Sie sowohl einmalig als auch ereignisgesteuert prüfen, ob das Dokument damit übereinstimmt.

Für eine einmalige Prüfung sehen Sie sich den Wert der Eigenschaft matches an. Er ist true, wenn das Dokument die Anforderungen des Media Query erfüllt.

Wenn Sie fortlaufend darüber informiert werden möchten, ob das Dokument mit dem Media Query übereinstimmt, können Sie stattdessen das Ereignis change des Objekts überwachen. Ein anschauliches Beispiel dafür finden Sie im Artikel zu Window.devicePixelRatio.

Beispiele

Dieses Beispiel führt das Media Query (width <= 600px) aus und zeigt den Wert der Eigenschaft matches der resultierenden MediaQueryList in einem <span> an. Die Ausgabe lautet „true“, wenn der Viewport höchstens 600 Pixel breit ist, und „false“, wenn das Fenster breiter ist.

HTML

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;
}

JavaScript

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

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

Der JavaScript-Code übergibt das zu prüfende Media Query an matchMedia(), um es zu verarbeiten. Anschließend setzt er die Eigenschaft innerText des <span> auf den Wert der Eigenschaft matches des Ergebnisses. So wird angezeigt, ob das Dokument zum Zeitpunkt des Ladens der Seite mit dem Media Query übereinstimmt.

Ergebnis

Weitere Codebeispiele finden Sie unter Media Queries programmatisch testen.

Spezifikationen

Spezifikation
CSSOM View Module # dom-window-matchmedia

Browser-Kompatibilität

Siehe auch

Help improve MDN

Erfahren Sie, wie Sie beitragen können Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden