JavaScript/Window/matchMedia

Die Methode matchMedia gibt ein MediaQueryList-Objekt zurück, das das Ergebnis einer Medienabfrage (Media Queries) enthält.

• 
• 
• 
• 
• 

Details: caniuse.com

Syntax

mql = window.matchMedia(mediaQueryString)

• mediaQueryString: Zeichenkette, die das Medienmerkmal enthält, nach dem geprüft werden soll.
• mql: Rückgabewert ist ein MediaQueryList-Objekt

Eigenschaften

• matches: gibt true zurück, wenn die Bedingung erfüllt ist
• media: gibt die abgefragte MediaQueryList zurück

Methoden

• addListener: fügt eine Listener-Funktion hinzu, die gefeuert wird, wenn sich der Zustand des Fensters ändert
• removeListener: entfernt diese Methode

Anwendungsbeispiel

Beispiel

if (window.matchMedia('(min-width: 35em)').matches) {
  /* Der Viewport ist mindestens 35em breit */
} else {
  /* Das Medienmerkmal trifft nicht zu, alle anderen Viewports */
}

Color-Picker

Sie können mit Window.matchMedia nicht nur Breiten, sondern auch eine Vielzahl anderer Medienmerkmale überprüfen.

Beispiel

if (window.matchMedia('(min-color: 2)').matches) {
  /* Color-Picker */
} else {
  /* Das Medienmerkmal trifft nicht zu, monochromer Bildschirm */
}

In diesem Beispiel wird die Farbtiefe des Bildschrims mit color abgefragt.

Ein color-picker in Javascript, der unter monochromen Displays entweder durch einen „Schade, sie haben leider kein Farbdisplay“-Hinweis oder durch ein reines Graustufen-Äquivalent ersetzt wird.

Weblinks

• CSSWG: window matchMedia() (draft)
• MDN: Window.matchMedia

• drweb.de: matchMedia() – Media Queries mit JavaScript
• MediaEvent: window.matchMedia • Pendant zu Media Queries
• javascriptkid: CSS media query matching in JavaScript using window.matchMedia()
• javascriptkid: Matching multiple CSS media queries using window.matchMedia()
• christianheilmann: Conditional loading of resources with mediaqueries
• paulund: Checking Media Queries With Javascript 6th June 2014