Layout für Mobilgeräte

[Auge]

Hallo

… nur, um das Folgende noch etwas zu konkretisieren.

die physikalische Auflösung eines Handys ist für Webseiten nicht unbedingt erkennbar. Gerade weil viele Webseiten nicht darauf ausgelegt sind, auf einer Auflösung von 300dpi angezeigt zu werden, wurde das "CSS Pixel" eingeführt.

Je nach Gerät entspricht ein CSS Pixel 2 oder 3 physikalischen Pixeln. In JavaScript gibt window.devicePixelRatio darüber Aufschluss, in CSS kann man Medienabfragen auf die resolution-Eigenschaft vorsehen.

Für den Webseitenersteller ist für die Dimensionierung der Elemente nur das CSS-Pixel relevant. Ob das Display im Portätmodus pro Zeile 1200 Pixel^[1] hat, ist irrelevant, wenn man weiß, dass mit diesen 1200 Pixeln (Device Pixel (entspricht der Hardwareauflösung)) schlussendlich eine 400 Pixel^[1:1] breite Darstellung (die sogenannten CSS-Pixel) angezeigt wird. Das Mehr an Pixeln wird in Kantenglättung gesteckt, damit die Darstellung möglichst scharf wirkt.

Für die Wahl der Dimensionen der Webseitenelemente ist die Hardware-Auflösung von Mobilgeräten üblicherweise irrelevant. Das gilt zudem auch für hochwertige Anzeigen im Desktop- und Notebook-Bereich. Dort wird ja durchaus auch mit hochaufgelösten Displays gearbeitet, bei denen die Auflösung der Anzeige in Browsern nicht 1 zu 1 der Hardwareauflösung entspricht.

Tschö, Auge

---

1. Die Zahlen sind willkürlich gewählt. ↩︎ ↩︎