am Röschibach

Für einen grossen Kunden soll eine auf mobile Endgeräte optimierte Version der existierenden Website erstellt werden. Laut den Anforderungen muss die Website auf Safari, dem Android Browser, Opera Mobile und Opera Mini laufen. Die mobile Website ist prinzipiell flexibel aufgebaut, das heisst Elemente werden so breit dargestellt wie der Bildschirm es erlaubt. Gewisse Elemente (beispielsweise ein Sprache-Wechseln div) sind im CSS mit float: right deklariert und werden daher – egal wie gross die horizontale Auflösung des Endgeräts ist – am rechten Rand positioniert.

Für Endgeräte mit einer Bildschirmbreite von 240 Pixel oder weniger funktioniert das float: right System konzeptionell nicht, weil dann eine Überlappung der rechts am Rand positionierten Elemente mit dem restlichen Inhalt stattfindet. Aus diesem Grund wird in dem Fall eine weitere CSS Datei mobile240.css geladen, die diese Elemente verkleinert und absolut positioniert.

Zusätzlich wird für Opera Mini ein weiteres CSS mobile240.css geladen, weil in diesem Browser das vertikale Zentrieren mittels der CSS Eigenschaft line-height nicht funktioniert. Im Code unten wird das mit Javascript erreicht. Das dient nur zur Veranschaulichung und zur Debug-Ausgabe. Im Produktivsystem wird dies mit CSS Mediaqueries erreicht:

<link rel="stylesheet" type="text/css" media="only screen and (max-device-width: 240px)" href="css/mobile240.css" />

Das System funktioniert hervorragend, ausser bei Opera Mini.

Weiterlesen »