matchMedia() – Media Queries mit JavaScript

Dass eine Website auch auf mobilen Geräten funktionieren und vernünftig aussehen muss, ist mittlerweile zu einer Selbstverständlichkeit und jüngst sogar zu einem Ranking-Faktor geworden. Dank Media Queries ist es zum Glück relativ einfach, per CSS das Aussehen für unterschiedliche Displaygrößen und -orientierungen zu definieren. Die JavaScript-Methode „matchMedia()“ ermöglicht es zudem, Media Queries auch in JavaScript einzusetzen. Somit stehen uns alle Möglichkeiten moderner Frontend-Programmierung offen.

Der Vorteil von „matchMedia()“

Bisher gelang es unter JavaScript nur bedingt, auf Browser- beziehungsweise Geräteeigenschaften zu reagieren. Zwar gibt es die Möglichkeit, die Browser- sowie die Bildschirmauflösung abzufragen – so einfach und bequem wie mit Media Queries bei Stylesheets ist es allerdings nicht. Vor allem muss man mit unterschiedlichen Begrifflichkeiten arbeiten, was die Entwicklung responsiver Websites mit CSS in Kombination mit JavaScript erschwert.

if (window.innerWidth >= 320 && window.innerWidth > window.innerHeight) {
  …
}

Im obigen Beispiel wird über eine Bedingung geprüft, ob die Fensterbreite größer gleich 320 Pixel ist und das Fenster in Landscape-Orientierung dargestellt wird. Für die letzte Bedingung wird einfach geprüft, ob das Fenster breiter als hoch ist. Mit der Methode „matchMedia()“ lässt sich diese Abfrage mit einer Media-Queries-Angabe darstellen, die so auch in einem Stylesheet vorkommen kann.

if (window.matchMedia("(min-width: 320px) and (orientation: landscape)").matches) {
  …
}

Hier wird der Methode einfach per Media Queries übergeben, welche Bedingungen erfüllt sein müssen. Wichtig ist, dass die Methode mit dem Attribut „matches“ abgeschlossen wird. Es wird „true“ zurückgeben, wenn die Media-Queries-Angabe vom Browser erfüllt wird.

Vor allem im Zusammenspiel mit Stylesheets ist es eine Erleichterung, Media Queries sowohl per CSS als auch per JavaScript einsetzen zu können. Außerdem stehen alle Bedingungen zur Verfügung, die auch per CSS berücksichtigt werden können. Neben der Auflösung und der Orientierung lässt sich beispielsweise die Pixeldichte des Gerätes („device-pixel-ratio“) berücksichtigen.

Über das Attribut „media“ ist es zudem möglich, die Media-Queries-Angabe der Methode auszulesen.

console.log(window.matchMedia("(min-width: 320px) and (orientation: landscape)").media);

Das Beispiel schreibt also den in „matchMedia()“ hinterlegten Wert in die Browserkonsole.

Per Event und „matchMedia()“ auf Änderungen reagieren

In den seltensten Fällen sind die beim Seitenaufruf berücksichtigten Media Queries statisch. Bei Desktopgeräten kann sich die Auflösung des Browserfensters, bei Mobilgeräten kann sich die Geräteorientierung ändern. Daher sollte man Änderungen an Browser und Gerät per Event überwachen.

Die Änderung der Browsergröße könnte man noch mit dem Event-Handler „resize“ abfangen. Andere Geräte- und Browsereigenschaften können jedoch nicht mit den gängigen Event-Handlern in den Griff bekommen werden.

Zwar gibt es keinen Event-Handler speziell für Media Queries; dennoch gibt es die Möglichkeit, Änderungen der per Media Queries angegebenen Bedingungen zu überwachen.

Zunächst müssen zwei Variablen definiert werden. Die eine Variable (im Beispiel „mq“) enthält die „matchMedia()“-Methode mit den zu überwachenenden Media-Queries-Angaben.

Die zweite Variable (im Beispiel „mq_ereignis“) enthält eine Funktion, welche prüft, ob die Media-Queries-Angaben erfüllt sind oder nicht.

Dazu wird per „matches“ abgefragt, ob die in der Variablen „mq“ hinterlegten Angaben zutreffen.

var mq = window.matchMedia("(min-width: 320px)");

var mq_ereignis = function(mq) {
  if (mq.matches){ 
    // Fensterbreite ist mindestens 320 Pixel breit
  } else {
    // Fensterbreite ist kleiner als 320 Pixel
  }
}

Anschließend wird der Funktion, welche in der Variablen „mq_ereignis“ hinterlegt ist, noch die Variable „mq“ übergeben. Im letzten Schritt wird der Variablen „mq“ noch per „addListener()“ die Funktion in „mq_ereignis“ zugewiesen.

mq_ereignis(mq);
mq.addListener(mq_ereignis);

Das gesamte Script sollte im HTML-Head untergebracht sein. Anschließend reagiert die Seite dynamisch auf Änderungen, welche die Media-Queries-Angaben betreffen, die per „matchMedia()“ definiert wurden.

Browsersupport und Polyfill

Die Methode „matchMedia()“ wird von allen gängigen Browsern unterstützt. Der Internet Explorer unterstützt die Methode ab Version 10. Für ältere Browser gibt es ein Polyfill, welches die Funktionalität nachbildet.

(dpe)