Die mysteriöse Textvergrößerung im iPhone-Safari

iPhone-Besitzer kennen das Phänomen: Man surft mit dem eingebauten Mobile-Safari-Browser auf eine Website, und das Display zeigt die gewohnte Darstellung der Website, nur um einen gewissen Prozentsatz verkleinert, damit alles auf einmal auf den Screen passt.

Doch die Verkleinerung der Website ist nicht ganz so akkurat: Manche Textabschnitte werden eigenmächtig deutlich vergrößert und haben nur noch wenig mit dem Schriftgrad zu tun, der ihnen nach den allgemein gültigen CSS-Regeln zustünde. Mobile Safari macht das, weil es für uns sorgt! Das Ziel ist es, den Hauptfließtext einer Website als solchen zu identifizieren und – unter den widrigen Umständen eines kleinen Displays – besser lesbar darzustellen, während man andere Elemente lieber im Original-Layout belässt, damit nicht das gesamte Seitenlayout gesprengt wird.

Verantwortlich für diese eigenmächtige Beurteilung ist die CSS-Eigenschaft -webkit-text-size-adjust, welche per default bei allen Elementen auf auto gesetzt ist. Diese überlässt dem Browser die Beurteilung, ob es sich bei dem Element um Hauptfließtext handelt oder nicht. Und da fängt die Misere an, denn die Regeln, nach denen Safari hier vorgeht, sind nicht unbedingt leicht nachvollziehbar. Unsere Recherche hat bisher folgendes ergeben:

Vergrößert wird:

  • Text, der ordentlich als p, ul/li oder ol/li ausgezeichnet wird
  • Nackter Text in einem ungefloateten div-Element
  • Nackter Text in einem gefloateten div-Element, wenn danach oder davor ein weiteres div-Element in der gleichen Richtung gefloatet wird

Im Originalzustand verbleibt:

  • Nackter Text in einem div-Element, wenn am Ende ein Link gesetzt wird. Telefonnummern werden in Links umgewandelt und verhalten sich auch als solche.
  • Nackter Text in einem div-Element, wenn nur dieses eine div gefloatet wird
  • Text, der in Abweichung vom Default-Wert eine dieser Styling-Angaben erhält: line-height, font-size, letter-spacing
  • Als Headline ausgezeichnete Elemente

Es gibt sicherlich noch weitere Einflüsse, die das eine oder andere Verhalten auslösen, aber das Reverse Engineering ist an dieser Stelle eine mühsame Sache. Festzuhalten gilt aber: Wer sich das praktische Verhalten der Schriftvergrößerung zu Nutze machen will, sollte folgende zwei Regeln befolgen:

  1. Die Hauptfließtexte der Website hübsch semantisch in p, ul/li, ol/li usw. packen und nicht einfach nackt in ein Layout div reinpacken.
  2. Wo nach einem iPhone-Test die Vergrößerung nicht erwünscht ist, kann mittels -webkit-text-size-adjust: none nachgeholfen werden, welches man gezielt auf bestimmte Elemente anwenden kann.

Oder man geht den umgekehrten Weg, und verbietet auf html-Element-Ebene das Adjustieren des Schriftgrades und erlaubt es nur bei ausgewählten Elementen, die man sicher dem Fließtext zuordnen kann. Apple hat zu diesem Thema übrigens nicht besonders viel zu sagen.

P.S.: Wer eine logische Erklärung für das unten dargestellte, extrem seltsame Verhalten hat (man beachte den Link in der ersten Zeile des Fließtextes), melde sich bitte in den Kommentaren:

Quelle: adkraut.de