JavaScript mit CSS-Media-Queries für Responsive Webdesign synchronisieren

Es gibt unterschiedliche Arten, wie man JavaScript mit Media-Queries synchronisieren kann um Style und Funktionalität passend zu verwenden.

Die unterschiedlichen Ansätze:

Ein Weg wäre die Auflösung bei einem resize-event in JavaScript anhand der Browserfensterbreite mit festen Werten zu vergleichen, welche auch bei den Media-Queries angegeben sind. Das funktioniert bei vielen Browsern aber leider nicht bei allen! Bei einigen gibt es einen Versatz durch die vertikale Scrollbar, wodurch JavaScript Funktionalität bei einer gewissen Ansicht (in den Grenzbereichen von den CSS-Media-Queries) nicht zur Verfügung steht.

Ein eindeutiger Weg um die richtige Anzeige der Media-Queries im JavaScript zu erkennen ist die Abfrage von eindeutigen Style-Informationen einzelner HTML Objekte. So kann man zum Beispiel auf Informationen eines Grid-Rasters prüfen, welches sehr oft bei Responsive Webdesign verwendet wird. Genauso kann man ein HTML-Element einfügen welches keine Höhe aber dafür unterschiedliche andere Informationen besitzt. Dies hat keine Auswirkungen auf die restliche Seite und man kann anhand einer ID beispielsweise auf das jeweilige Media-Query prüfen.

 

Schreibe einen Kommentar

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