JavaScript/Window/matchMedia
Aus SELFHTML-Wiki
< JavaScript | Window(Weitergeleitet von 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
: gibttrue
zurück, wenn die Bedingung erfüllt istmedia
: gibt die abgefragte MediaQueryList zurück
Methoden
addListener
: fügt eine Listener-Funktion hinzu, die gefeuert wird, wenn sich der Zustand des Fensters ändertremoveListener
: entfernt diese Methode
Anwendungsbeispiel[Bearbeiten]
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[Bearbeiten]
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[Bearbeiten]
- 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