CSS Anpassung für Tablet

[marctrix]

Hej WernerK,

eine Webseite soll auf einem normalen Desktop PC / Monitor laufen als auch auf einem 7" Tablet mit 1200 x 800 Auflösung (Pickeldichte 206ppi)

Und all die anderen Tablets und Smartphones? Auf denen soll es nicht laufen?

Warum gerade auf diesem Tablet? Smartphones werden sehr viel häufiger verwendet als Tablets!

Ich würde gerne die Schriftgröße auf dem Tablet etwas vergrößern und versuche das mit:

@media screen and (max-device-width:1200px) {
    font-size: 18px;
}

1. möchtest du die Größe des viewports und nicht die Pixel-Anzahl des Gerätes kennen (auf iPads kann ein Browser-Fenster beliebig schmal oder breit sein, gilt sicher auch für andere Geräte)
2. ist es umständlich und schädlich mit dem Layout für den Desktop anzufangen. Besser: lege die schriftgröße für kleine Bildschirme zuerst fest und mit 'min-width: irgendwas‘ dann eine andere Größe für Desktops.
3. innerhalb der Media-query werden vollständige CSS-Regeln notiert — inklusive Selektoren!
4. verwende keine Pixel-Angaben für Schriftgrößen, sondern em oder rem
5. verwende keine Pixel-Angaben für die min-width-Angabe sondern em oder rem. Sonst kannst du nur mit erheblichen Klimmzügen sicherstellen, dass der Content immer vernünftig angezeigt wird, so dass alles im sichtbaren Bereich ist, sich nichts überlappt, Zeilen nie zu lang oder zu kurz werden usw.
6. vergiss niemals: Nutzer können nicht nur zoomen, sondern auch die Schrift vergrößern😉

Da dies sich nie auswirkt habe ich mal mit Javascript eine Ausgabe gemacht. Hier kommt jetzt anstatt der erwarteten 1200 x 800 aber nur 949 x 545 heraus.

JS ist nicht für Layout zuständig.

An was liegt das?

Das ist eine Frage, die keine ist. 😉 CSS erledigt das besser und performanter!

Marc