Schriftgröße in Abhängigkeit vom Anzeigegerät

Hallo, ich habe kürzlich fesgestellt, dass mein Template bei Google Page Speed (Mobile Wertung) ziemlich abgewertet wird, weil ich eine font-size von 15pt nutze. Auf einem Desktop sieht das gut aus und fällt bei der Desktop-Wertung auch nicht negativ auf. Die Mobile-Wertung, dagegen, sackt auf 61 Punkte ab weil die Schrift zu klein ist. Google hätte gerne mindestens 16. Ich gebe auch zu, dass 16 auf einem Smartphone oder Tablet besser lesbar ist. Gibt es eine Möglichkeit festzulegen, dass, abhängig von der Auflösung des Anzeigegerätes, eine bestimmte font-size angezeigt wird? Generell auf 16pt mag ich nicht wechseln weil, obwohl der Unterschied ja nur ein pt ist, 16 pt auf einem Desktop sehr „dick aufträgt“. Grüße

Da ich einmal annehme, dass Du noch weitere Aspekte lernen musst, um Deinen Shop für mobile Geräte anzupassen, sei Dir das Stichwort „Responsive Webdesign“ einmal ans Herz gelegt. Es hängt nicht nur an der Schriftgröße… ;o)

1 Like

Danke für deine Antwort *klick* Responsive Design ist mir ein Begriff. Ich wollte zunächst aber gar nicht auf ein responsives Template wechseln sondern nur die Schriftgröße bei mobilen Geräten mit 16pt anzeigen lassen. Das würde die Mobile-Wertung bei Page Speed immerhin in den grünen Bereich bringen (habe ich ausprobiert). Grüße

Hallo zusammen, eine Alternative mit der man alles vollständig in der Hand hat, wäre es, über das Plugin „Template Switcher“ separate Templates mit eigenen Settings je Mobilgerät zu definieren. Hier der Link: http://store.shopware.de/template-desig … -bestimmen Beste Grüße!

[quote=“kokularaja”]Ich wollte zunächst aber gar nicht auf ein responsives Template wechseln sondern nur die Schriftgröße bei mobilen Geräten mit 16pt anzeigen lassen.[/quote] Die zu “kleine” Schrift bei den Mobile-Devices ist eigentlich kein Problem der Devices, sondern der “Pixeldichte”. Sinnvollerweise ändert man daher die Schriftgröße auch in Abhägigkeit der “Pixeldichte” mit einem Media-Query: z. B. : https://developer.mozilla.org/en-US/doc … resolution oder über min-device-pixel-ratio in der Media-Query. Dort kann man dann für die benötigten Elemente neue Werte setzen. Es kann gut sein, dass neben der Schriftgröße auch andere Werte (width…) angepasst werden müssen. Für kleine “Bildschirme”, die keine hohe Pixeldichte haben, kann man zur Sicherheit noch z. B. max-width als alternative Bedingung im Media-Query benutzen. Viele Grüße HTH

1 Like