Window: matchMedia() Methode

mediaQueryString

Ein String, der die zu parsende Media-Query als MediaQueryList angibt.

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

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 die Media-Query erfüllt.

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

Wenn Sie jederzeit informiert bleiben müssen, ob das Dokument die Media-Query erfüllt 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.

Dieses Beispiel führt die Media-Query (max-width: 600px) aus und zeigt den Wert der matches-Eigenschaft der resultierenden MediaQueryList in einem <span> an. Das Ergebnis zeigt "true", wenn der Viewport kleiner oder gleich 600 Pixel breit ist, und "false", wenn das Fenster breiter ist.

let mql = window.matchMedia("(max-width: 600px)");

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

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

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

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

.mq-value {
  font:
    18px arial,
    sans-serif;
  font-weight: bold;
  color: #88f;
  padding: 0.4em;
  border: 1px solid #dde;
}

Siehe Programmatische Tests von Media-Queries für zusätzliche Codebeispiele.

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