CSS für mobile Geräte - Seiten viel zu klein

Mupfel

Mitglied
Hallo zusammen,

im Vergleich zu den Desktop-Browsern verkleinern die Mobil-Versionen meine Seite immer sehr. Habt ihr Tipps für mich, wie ich die ansehnlich bekomme? Stichworte wären schon gut - ich habe keine Idee, wonach ich suchen soll. Ich benutze oft cm-Angaben in zB der Breite; ist das ein Problem?
 
Hast du den Meta-Viewport-Tag im Head deines HTML?

HTML:
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
Siehe hier: https://www.w3schools.com/css/css_rwd_viewport.asp

cm-Angaben sind keine gute Idee.
Grundsätzlich empfehlen sich für Websites v.a. Pixel (px) als absolute Maßeinheit sowie relative Einheiten wie rem (basiert auf der font-size des Root-Elements) und Prozentangaben, neben vielen weiteren, die eher in Spezialfällen zum Einsatz kommen, wie z.B. die Viewport Units.

Grundsätzlich solltest du möglichst auf feste Breiten- und insbesondere Höhenangaben verzichten, wenn es ums Layout im größeren Maßstab geht.
Ausnahmen sind z.B. Begrenzungen der Breite von Text, z.B. mittels Containern, oder kleinere Elemente, die bewusst nur sehr klein sein sollen.

Zu den Grundlagen von HTML & CSS gibt es seit Kurzem einen neuen kostenlosen Kurs von Kevin Powell, der sicherlich hilfreich ist:

Zu CSS Units gibt es ein älteres Video, was sicherlich trotzdem noch einigermaßen relevant ist:

Ansonsten sind MDN und für Anfänger z.B. auch w3schools gute Anlaufstellen, um die absoluten Grundlagen zu lernen. MDN ist ansonsten auch für Fortgeschrittene ein gutes Nachschlagewerk, hat aber mittlerweile auch Lernpfade und Tutorials.
 
Zurück
Oben Unten