Schriftgröße dynamisch ändern

[molily]

Hallo,

Ausgehend davon habe ich mal schnell was zusammengebastelt.

Welchen Sinn soll das haben?

Safari Mobile (iPhone), Android-Webkit-Browser sowie Opera Mobile haben eigene Algorithmen, um eine Seite auf dem Handy-Bildschirm sinnvoll zu layouten und die Schriftgröße automatisch anzupassen. Ist die Seite groß, wird sie automatisch an den Viewport angepasst (skaliert). Ein Algorithmus findet den Copytext und vergrößert ihn ggf. relativ zum restlichen Text auf eine Mindestgröße. Der Nutzer kann einzelne Spalten antappen, sodass dessen Text den Viewport ausfüllt und entsprechend vergrößert und umbrochen wird. Oder pinchen, um die ganze Seite zu vergrößern.

Hinzu kommt, dass neuere Geräte eine ziemliche hohe Auflösung haben, also solche Scripte wahrscheinlich nicht greifen werden, weil sie Desktop-Viewports zu entsprechen scheinen. Eine weitere Skalierung nimmt bspw. das Retina-iPhone vor, um Seiten gleich anzuzeigen, die an die vorherige Auflösung angepasst wurden (die Pixel werden verdoppelt). Die Pixelbreite bleibt dabei gleich (320 mal 480 virtuelle Pixel), aber die Pixelrate (»device-width«) hat den Faktor 2.

Zudem gibt iOS für innerHeight und innerWidth Quatschwerte zurück, die sich mehr auf den skalierten als auf den tatsächlichen Viewport beziehen (schon gar nicht auf die tatsächlichen Pixel, siehe oben). Daher ist das Script auf dem iPhone anscheinend funktionsuntüchtig.

Alles in allem gibt es bereits sinnvolle Möglichkeiten, wie man mobile Layouts baut: Meta-Tags zur Kontrolle der Skalierung sowie Media-Queries für ein sinnvolles Layout je nach Viewport- bzw. Device-Breite sowie Pixeldichte.

Ich kann die Stoßrichtung des Originalscriptes, bei dem offenbar Elemente in den Viewport eingefasst werden, um einen App-Look zu erzielen, noch mehr verstehen als die deines Scripts. Für Schriftskalierung ist JavaScript ungeeignet; da reicht es, im Rahmen eines anpassungsfähigen Layouts eine große oder keine Schriftgröße zu setzen. Für die Verteilung und Skalierung von UI-Elementen auf unterschiedlichen Viewports würde ich auf absolute Positionierung mit Prozentwerten, auf Positionierung mit Pixelwerten über Media-Queries oder ein Flexbox-Layout setzen. Das ist alles bewährt.

Mathias