Media Queries dürften so einigen aus der CSS Welt bekannt vorkommen. Mit ihnen lassen sich „Responsive“-Lösungen sehr gut realisieren.

Nun stand ich aber vor dem Problem, dass ich auch in Javascript bei bestimmten Auflösungen eine andere Vorgehensweise benötigte. Wie soll man aber ein mobiles Gerät erkennen? Anhand vom User-Agent definitiv nicht. Diese uralte Lösung ist sehr ungenau und durch Tablet-Hybride etc. verschwimmen Mobile und Desktop immer mehr miteinander.

Ein – Vorsicht es handelt sich um meine persönliche Meinung – wirklich schönes und pures Javascript (kein jQuery oder ähnliche Frameworks) Snippet sollte die Lösung meines Problems darstellen, welches auch komplexere Fälle berücksichtigen könnte:

isMobile = window.matchMedia("only screen and (max-width: 760px)").matches;

Durch window.matchMedia(mediaQueryString) lässt sich ein beliebiger Media Query String matchen. Die Funktion gibt uns ein MediaQueryList Objekt zurück, welches die Eigenschaft matches besitzt. Diese beinhaltet einen Boolean und gibt ein true zurück, falls die Media Query Liste für das aktuelle Dokument zutrifft, sonst ein false.

Nun könnt ihr im weiteren Verlauf einfach mit einer If-Bedingung auf die Variable isMobile prüfen. Natürlich kann man die Media Queries noch anderweitig einsetzen – theoretisch sollten alle CSS typischen Media Queries möglich sein.