Media Queries in alten IEs mit Respond JS

Weil wir gerade bei Browserkompatibilität sind hier noch ein kleiner Nachtrag zum vorhergehenden Post. Da Responsive Design mithilfe von Media Queries erst seit dem Internet Explorer 9 vom Redmonder Browser unterstützt werden, können viele Design Anpassungen kaum für ältere Browser portiert werden.
Jetzt kann man natürlich die berechtigte Frage stellen ob man das überhaupt will, schliesslich ist das Responsive Design ja hauptsächlich für Smartphones wichtig und kommt auf dem Desktop so oder so eher selten wirklich zum Einsatz.
Dies mag stimmen, allerdings nutzt Windows 7 Phone zum Beispiel noch eine ältere Version der IE Engine welche angeblich auf der Engine des IE 7 basiert (korrigiert mich wenn ich da falsch liege, habe leider noch nie ein Windows 7 Phone länger als 1 Minute in der Hand gehabt).

Ausserdem ist es ja das Ziel eines Webdesigners das Design einer Website möglichst kompakt und auf allen Plattformen einheitlich zu halten.

Mit der Integration eines kleinen Javascripts ist es mit nur einer Zeile HTML möglich auch für Internet Explorer 8 und älter das CSS entsprechend der Fenster / Displaygrösse anzuzeigen.

Möglich wird dies durch Response JS. Dieses Skript ist Open Source und für jeden auf github verfügbar.Wer sich zuerst überzeugen möchte dass es wirklich funktioniert kann mit dem IE die dafür erstellte Demoseite besuchen. (Kleiner Tipp: Im IE9 gibt es die Möglichkeit die Anzeige von IE7 sowie IE8 zu simulieren. Dazu im Browser F12 drücken und dann den „Browser Mode“ auf die gewünschte Browser Version ändern.)

Anwendung

Zuerst braucht man natürlich eine Seite mit media queries (Siehe Responsive Webdesign mit Media Queries) und dann reicht es bereits die Datei respond.src.js in die Seite einzubinden:

<script src="respond.src.js"></script>

Leave a Reply