Javascript mit Mediaquery im responsive Design verbinden
Mit CSS kann man Eigenschaften mit Mediaqueries abhängig von der Bildschirmgröße ändern – ein wichtiger Bestandteil des responsive Designs.
Manchmal will man aber auch bestimmten Javascript Code nur bei einer Bildschirmgröße ausführen. Die Verkettung von Javascript – Codes mit einer Mediaquery kann man über unterschiedliche Techniken erreichen.
Zum einen kann man über Javascript oder JQuery die Fenstergröße abfragen und mit den Angaben in der Mediaquery vergleichen Wie hier beschrieben
Das Problem ist aber dass die Werte aus CSS und Javascript bzgl. der Fenstergröße nicht zusammenpassen. Auffallen wird dies nur wenn man die Größe um den Beakpoint herum öfters ändert. Aber es kann eben Bildschirmgrößen geben bei denen die Änderungen aus CSS nicht mit denen aus JS zusammen passen.
Weitere Möglichkeit: Window.matchMedia ()
Hier benötigt man aber für IE < 10 einen Polyfill
Des weiteren muss man die Mediaquery in CSS und JS identisch vorhalten und bei einer Anpassung an beiden Stellen pflegen. Enquire.js löst das Problem zwar nicht aber macht die Sache in JS etwas umgänglicher.
Einen anderen Ansatz verfolgt David Walsh indem er für ein unsichtbares Element den z-index für die unterschiedlichen Größen in den CSS Mediaqueries setzt und dies über JS abfrägt.
Einen anderen Ansatz sehe ich darin, nicht ein imaginäres Element als Indikator zu verwenden, sondern eine CSS Eigenschaft, die auch wirklich bei der entsprechenden Größe geändert wird. Wird zum Beispiel bei einer Größe der Float der rechten Spalte aufgehoben, kann man dies als Indikator in JS nutzen, um einen bestimmten Code auszuführen, der nur bei dieser Breite berücksichtigt werden soll. Allerdings hat man hierbei eine Abhängigkeit vom Layout. Wobei man bei einer Layoutänderung wahrscheinlich gut daran tut sich das JS ebenfalls anzusehen, das für bestimmte Bildschirmgrößen gedacht ist.