JavaScript/Window/matchMedia

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

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

  • Chrome
  • Firefox
  • IE 10
  • Opera
  • Safari

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

[Bearbeiten] Anwendungsbeispiel

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

[Bearbeiten] 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.

[Bearbeiten] Weblinks


Meine Werkzeuge
Namensräume

Varianten
Aktionen
Übersicht
Index
Mitmachen
Werkzeuge
Spenden
SELFHTML