praegnanz.de büro für intervernetzte medien

Gerrit, 02.11.2010

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

12 Kommentare

  1. andalusi am 2. November 2010 #

    Ich habe mich schon die ganze Zeit gewundert wieso mein iPhone die Schrift so komisch darstellt.

    Danke für den Tip!

  2. Paul am 2. November 2010 #

    Na toll, jetzt wo das Web so schön standardmäßig läuft, kommt Apple auf die kluge Idee, ein eigenes Süppchen zu kochen. Prima!

    Ich denke ja gar nicht dran, mein CSS aufgrund eines Bugs in einem einzelnen Mobilgerät anzupassen.

  3. Gerrit am 3. November 2010 #

    @Paul: erstens ist das kein Bug, sondern ein Feature, welches einfach nicht gut genug dokumentiert ist!

    Zweitens, zum Thema »einzelnes Mobilgerät«: hast Du dir mal die Verteilung des Traffics angeguckt, der weltweit beim mobilen Internetzugriff entsteht? Wieviel Prozent davon iPhone? 60? 70?

  4. SusiQ am 3. November 2010 #

    aha … und wenn Apple das ›Feature‹ ändert dann springen die Entwickler und tanzen nach deren Pfeife. Gute Idee

  5. Gerrit am 3. November 2010 #

    @SusiQ: Ich springe seit 7 Jahren nach der Unfähigkeits-Pfeife von Microsofts IE6-Entwicklern, ein bisschen Abwechslung tut gut!

  6. Benjamin am 3. November 2010 #

    Aber das ist doch genau der Punkt! Sich bei dem IE (zu recht) über die ganzen eigenen Süppchen zu ärgern aber gleichzeitig selbigen Quatsch von Apple erdreisten es gar ein Feature zu nennen ist doch der Knaller.

    Die Sinnhaftigkeit spreche ich im Übrigen dieser Funktion gar nicht ab. Kann ja sogar nürzlich sein. Ein Feature wäre es allerdings nur dann, wenn es nicht standardmässig auf auto stünde, und vor allem vorhersehbar agiert (und das ist ja offenbar nicht der Fall).

  7. SusiQ am 3. November 2010 #

    JO, aber der Entwickler (oder PM oder Marketing) sollte dennoch die Macht besitzen das hervorzuheben was er will. Nur weil Apple denkt das irgendwas in einem li-Element (das muss man sich mal vorstellen) ein Hauptteil ist, wird es anders formatiert?!
    Das ist crazy … aber solange man solche Sachen deaktivieren kann ist es noch fair.

  8. Görkan am 3. November 2010 #

    Die Defaulteinstellung lautet doch:

    -webkit-text-size-adjust: none

    wieso hält sich Apple nicht daran, und setzt diese eigenmächtig auf »auto«?

    Davon ab, dass Webseiten mit dieser Einstellung auf iOS Devices nicht »besser« aussehen, wird das CSS mit diesen vendor-Ergänzungen natürlich auch nicht validiert – was zugegebenermaßen eher einen kosmetischen Fehler darstellt, aber trotzdem…

    Wird in der Community darauf hingewirkt, dass Apple die Einstellungen zukünftig auf »none« belässt, oder gibt es diesbzgl. gar keine Diskussionen mit Apple?

    Wie realisitisch ist es dass, dieses -text-size-adjust: in CSS3 aufgenommen wird und Apple somit nicht mehr das »eigene Süppchen« kochen muss?

  9. Görkan am 3. November 2010 #

    …und btw…

    wie macht es eigentlich Google bei Android?

    Weiss das jemand ob dort die Einstellung auch auf »auto« oder auf »none« default mäßig ist?

  10. Willi am 4. November 2010 #

    Ich habe ein iPhone und einen Palm Pre und ich habe das Gefühl, dass der Palm den Text auch eigenmächtig, aber anders vergrößert als Safari. Klar, ist die gleiche Engine (Webkit). Ich bin mir allerdings nicht ganz sicher, sollte mal einen A-B-Vergleich machen.

  11. !important am 26. Januar 2015 #

    @Görkan
    bei Android mit firefox bleibts schön so wie es soll.

Kommentar schreiben

Nutzt Textile zum Strukturieren eures Textes.
SEO-Beiträge werden gelöscht, auch bei thematisch passendem Spam.