Layout für Mobilgeräte

[Gunnar Bittersmann]

@@AndreD

Mir ist nicht klar, wie ich im CSS Bereich Handys von Desktops unterscheiden kann.

Gar nicht. Das solltest du auch überhaupt nicht wollen.

Auf einem Handy im Querformat willst du sicher ein anderes Layout als im Hochformat. Dort unterscheidety sich das Layout womöglich nicht von dem Desktop im Vollbildmodus.

Auf einem Desktop mit Browser im Vollbildmodus willst du sicher ein anderes Layout als wenn das Browserfenster nur einen Teil des Bildschirms füllt. Oder wenn eine Sidebar eingeblendet ist. Oder wenn der Nutzer reinzoomt, weil sie sonst schlecht lesen kann. Dann unterscheidet sich das Layout womöglich nicht von dem auf dem Handy im Hochformat.

Und dann sind da noch beliebig viele Zwischengrößen, bspw. auf Tablets.

TL;DR: Die Unterscheidung von Handys und Desktops ist unsinngig. Sie hat nichts mit responsive design zu tun, sondern mit dem Nichtverstehen von responsive design.

Die Auflösung kann ich nicht nutzen, denn es gibt mittlerweile Handys die eine höhere Auflösung haben als ein Laptop mit HD Auflösung

Nein, denn hier sind nicht Device-Pixel von Bedeutung, sondern CSS-Pixel.

Wenn nötig, verwendest du media queries mit Abfrage der Viewportbreite. Und zwar in em, nicht in px.

Wenn’s denn nötig ist …

Gibt es noch einen anderen Ansatz?

Ja: intrinsic design. Mit Flexbox oder CSS-Grid ist es möglich, dass sich das Layout an den Vieport anpasst, ohne dass man dazu Breakpoints (media queries) setzen müsste.

Tip: Wenn du gerade anfängst, beschäftige die zuerst mit Grid. Das ist einfacher zu verstehen als Flexbox und fürs Seitenlayout meist auch das bessere Werkzeug.

Kwakoni Yiquan