ThemeTwenty Thirteen, Schriftgröße anpassen für mobile Geräte

Hallo Susann Vega,
es gab eine Zeit, da hab ich Suzanne Vega total viel gehört...

Als ich im Sommer mit WorpPress und responsive design angefangen habe, habe ich diese Infos im Netz gefunden, vielleicht helfen sie Dir ja weiter...

Schriftgrößen im iPhone
Gerade bei Smartphones wie dem iPhone (bei einem kleinen Display mit sehr hoher Auflösung) kann es bei einer Schriftgrößen-Angabe in Pixel sein, dass eine Schrift auf dem iPhone viel zu klein angezeigt wird.
Im iPhone ist die CSS3-Eigenschaft text-size-adjust standardmäßig Auto.
html { -webkit-text-size-adjust: auto; }
Das bedeutet, dass jede Webseite auf dem iPhone automatisch skaliert wird. (Möchtest du das automatische Skalieren vermeiden, kannst du die -webkit-text-size-adjust-Eigenschaft in deinem Stylesheet auf none setzen.)

Viewport
Zu den absoluten Grundlagen der mobilen Entwicklung gehört das Meta-Element viewport. Diese eine Zeile HTML-Code sorgt für eine korrekte Skalierung der Website beim ersten Aufruf auf dem mobilen Gerät.
Die Browser der mobilen Devices gehen zuerst einmal davon aus, dass Websites nicht für mobile Endgeräte ausgelegt sind und die Website-Breite die Display-Breite um einiges übersteigt.
Der Browser-Viewport (Anzeigebereich) ist deshalb z.B. in Mobile Safari auf eine Breite von 980 Pixeln eingestellt, so dass die meisten Website komplett zu sehen sind. Logischerweise mit dem Nachteil, dass die Inhalte sehr klein und Schriften nicht lesbar sind. Der Nutzer muss dementsprechend hineinzoomen.

Handelt es sich um Website, die speziell für mobile Devices erstellt oder optimiert ist, geht man meist nicht den obigen Weg, eine fixe Breite für den Viewport anzugeben (Ein iPhone hat z.B. im Hochformat eine Breite von 320px und im Querformat 480px). Dies hätte zur Folge, dass im Hoch- und Querformat die gleichen Inhalte, lediglich in einem unterschiedlichen Zoomlevel, gezeigt würden.

Stattdessen wird deshalb üblicherweise folgende Formel verwendet: Breite des Viewports = Breite des Devices. Konkret bedeutet dies: Das iPhone hat 320px Breite im Hochformat, weshalb genau 320px der Website gezeigt werden (1:1-Darstellung). Ebenso werden im Querformat dann 480px gezeigt. Diese flexible Einstellung ist einerseits geräteunabhängig und ermöglicht es andererseits auch, im Querformat den gewonnen Platz in der Breite sinnvoll zu nutzen.

Viewport-Einstellungen
Das Meta-Element für den Viewport besitzt neben der Breite weitere Eigenschaften, die komma-separiert aufgelistet werden.

<meta name="viewport" content="width=device-width, initial-scale=1.0,
maximum-scale=1.0, user-scalable=no">

initial-scale: Der Wert legt den anfänglichen Zoomgrad fest. 1.0 führt dazu, dass die Inhalte 1:1 dargestellt werden, d.h. auf einem Screen mit 320px Breite füllt eine 320px-breite Grafik die komplette Breite aus (siehe auch Screenshot oben). Dementsprechend führt z.B. 2.0 zu einer 2x-fachen Vergrößerung.

user-scalable: Mit diesem Attribut kann man definieren, ob der Nutzer auf der Seite zoomen kann (yes) oder nicht (no).

minimum-scale und maximum-scale: Diese beiden Eigenschaft ermöglichen es, den Zoomgrad einzuschränken. Setzt man z.B. die maximale Skalierung auf 2.0, kann der Inhalt maximal 2x-fach vergrößert werden.


Ich habe ein Samsung Handy (480x320), Android 2.3.6.

Wenn ich Deine Site im Hochformat aufrufe, werden die Bilder unterschiedlich groß dargestellt und dementsprechend sind die Unterschriften verschoben. Schriftgröße ist ok und Bildgrößen auch, wenn es nur eine von den 3 wäre.

Wenn ich Deine Site im Querformat aufrufe, werden die Bilder auch unterschiedlich groß dargestellt und dementsprechend sind die Unterschriften verschoben, aber der Größenunterschied ist deutlich geringer. Schriftgröße ist ok und Bildgrößen auch, wenn es nur eine von den 3 wäre.

Stürmische + sonnige Grüße aus der Nordsee
KuniT

 

Leider nein, nur, dass die Bildunterschriften jetzt "fett" sind und dadurch besser lesbar.

Ich glaube, Du brauchst Dir um Android 2.3.6 keine Gedanken zu machen. Keine Ahnung, wie viele Leute noch "so ein altes Handy" benutzen...

Mein Tablet (Samsung, 1024x600), Android 4.1.2):
leider siehe oben. Nur, dass hier die Unterschiede in den drei Bildgrößen sehr klein sind, aber noch sichtbar.

Schau doch mal in Deiner style.css ab Zeile 2617 (8.0 Media Queries). Ab dort wird definiert, was bei verschiedenen Monitorgrößen angezeigt werden soll.

Ab Zeile 2986: /* Mobile devices */
Ich würde hier zuerst in den verschiedenen Gallery-Styles schauen und testen.

LG
KuniT