MediaQueryList

Instanzeigenschaften

Das MediaQueryList Interface erbt Eigenschaften von seinem übergeordneten Interface, EventTarget.

matches Schreibgeschützt

Ein boolescher Wert, der true zurückgibt, wenn das document derzeit die Media Query List erfüllt, oder false wenn nicht.

media Schreibgeschützt

Ein String, der eine serialisierte Media Query darstellt.

Instanzmethoden

Das MediaQueryList Interface erbt Methoden von seinem übergeordneten Interface, EventTarget.

addListener() Veraltet

Fügt der MediaQueryList einen Callback hinzu, der aufgerufen wird, wann immer sich der Status der Media Query ändert—ob das Dokument die Media Queries in der Liste erfüllt oder nicht. Diese Methode existiert hauptsächlich für die Rückwärtskompatibilität; wenn möglich sollten Sie stattdessen addEventListener() nutzen, um auf das change Ereignis zu achten.

removeListener() Veraltet

Entfernt den angegebenen Listener-Callback von den Aufrufen, die erfolgen, wenn die MediaQueryList ihren Status der Media Query ändert. Dies passiert jedes Mal, wenn das Dokument zwischen dem Erfüllen und Nicht-Erfüllen der Media Queries in der MediaQueryList wechselt. Diese Methode wurde aus Gründen der Rückwärtskompatibilität beibehalten; wenn möglich sollten Sie in der Regel removeEventListener() verwenden, um Änderungsbenachrichtigungscallbacks zu entfernen (die zuvor mit addEventListener() hinzugefügt worden sein sollten).

Ereignisse

Die folgenden Ereignisse werden an MediaQueryList Objekte gesendet:

change

Wird an die MediaQueryList gesendet, wenn sich das Ergebnis der Ausführung der Media Query gegen das Dokument ändert. Wenn die Media Query beispielsweise (width >= 400px) lautet, wird das change-Ereignis jedes Mal ausgelöst, wenn sich die Breite des Ansichtsfensters des Dokuments so ändert, dass die Breite die Grenze von 400px in eine Richtung überschreitet.

Beispiele

Dieses Beispiel erstellt ein MediaQueryList und richtet dann einen Listener ein, um zu erkennen, wann sich der Status der Media Query ändert. Dabei wird eine benutzerdefinierte Funktion aufgerufen, um das Erscheinungsbild der Seite zu ändern.

const para = document.querySelector("p");
const mql = window.matchMedia("(width <= 600px)");

function screenTest(e) {
  if (e.matches) {
    /* the viewport is 600 pixels wide or less */
    para.textContent = "This is a narrow screen — less than 600px wide.";
    document.body.style.backgroundColor = "red";
  } else {
    /* the viewport is more than 600 pixels wide */
    para.textContent = "This is a wide screen — more than 600px wide.";
    document.body.style.backgroundColor = "blue";
  }
}

mql.addEventListener("change", screenTest);

Weitere Beispiele finden Sie auf den einzelnen Eigenschafts- und Methodenseiten.

Spezifikationen

Browser-Kompatibilität

Siehe auch

• Media queries
• Verwendung von Media Queries im Code
• window.matchMedia()
• MediaQueryListEvent
• Der Artikel Window.devicePixelRatio enthält ebenfalls ein nützliches Beispiel