Layout für Mobilgeräte

[Rolf B]

Hallo AndreD,

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.

Das setzt allerdings voraus, dass die Seite eine korrekte Viewport verwendet, denn andernfalls simulieren die Browser ein 960px breites Display.

Flexbox ist für das Layout der Gesamtseite eine Möglichkeit, aber eigentlich ist Grid die bessere Wahl, weil Grids zweidimensional sind und Flexboxen eigentlich nur eindimensional. Mit Hilfe von Medienabfragen kann man das Grid-Template je nach Bildschirmbreite anpassen. Typischerweise beginnt man mit dem Mobil-Layout (vorzugsweise untereinander), und wenn genug Breite da ist, fängt man an, Dinge nebeneinanderzusetzen (mobile first Ansatz). @media-Abfragen sind das Werkzeug dafür.

Hinzu kommen @container-Abfragen, mit denen man Breitenabfragen nicht nur auf den Viewport, sondern auch auf einzelne Elemente formulieren kann.

In den allermeisten Fällen kann man auf eine "Mobil"-Version der Seite verzichten (Wikipedia hat sowas wie de.m.wikipedia.org, das dürfte aber historisch gewachsen sein).

Zugegeben, das ist eine steile Lernkurve. Aber wenn Du auf diese Hilfsmittel verzichtest, brichst Du Dir erst recht die Finger.

Rolf