Kategorien
HTML/CSS JavaScript & jQuery Responsive Design

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.

matchMedia()

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)

Von Denis Potschien

Denis Potschien ist seit 2005 freiberuflich als Kommunikationsdesigner tätig, seit Anfang 2010 im Kreativkonsulat in Iserlohn, einem Büro für Gestaltung und Kommunikation. Dort betreut er kleine und mittelständische Unternehmen ebenso wie kommunale Körperschaften und Organisationen aus Südwestfalen und dem Ruhrgebiet.

Als Webdesigner und -entwickler gehören HTML5 und CSS3 zu seinen Kernthemen, weshalb er dazu 2013 ein Buch geschrieben hat. „Pure HTML5 und CSS3“ richtet sich an alle, die Vorkenntnisse haben, sich aber bisher mit HTML5 und CSS3 nicht oder nur am Rande beschäftigt haben.

4 Antworten auf „matchMedia() – Media Queries mit JavaScript“

Danke für diesen äußerst interessanten Artikel.

Wie setzt man es eigentlich um, dass eine Javaskript-Datei nun geladen und ausgeführt wird, wenn der Viewport mehr als 480 Pixel beträgt?

Immer noch eine Schwierigkeit bleibt die Möglichkeit Funktionen die in bestimmten Bildschirmgrößen aufgerufen wurden, auf anderen Auflösungen zu widerrufen. Das Hauptproblem sah ich nie in der Bestimmung der Bildschirmgröße und damit verbunden dem setzen bestimmter Handler. Aufwendig wird es erst wenn mit Eventhandler mit unbinds wieder deaktiviert werden müssen.

Dafür sollte mal jemand ein Plugin entwickeln.

Ich sehe den Vorteil eigentlich in diesem Plugin kaum. Eine if-Anweisung mit if(windowWidth < XXX) ist immer noch schnell realisiert. Jquery-Mobile bietet außerdem das Event orientationchange an. Damit ist im Grunde alles was dieses Plugin leisten kann bereits abgedeckt. Trotzdem schön dass man sich wenigstens diesen kleinen Umweg über Plugins nun sparen kann. Danke für den interessanten Artikel!

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.