nicht angemeldet
Schriftgröße dynamisch ändern
Matthias Apsel
2 0 Matthias Apsel
0
Schriftgröße dynamisch ändern
Matthias Apsel
Om nah hoo pez nyeetz, alle!
Im Wiki gibt es einen Artikel, Diskussion dazu, der auf mMn unnötig komplizierte Art beschreibt, wie man die Schriftgröße für Handys u. dgl. an die Auflösung anpasst.
Ausgehend davon habe ich mal schnell was zusammengebastelt.
Meine Frage ist, inwieweit das ein sinnvoller Ansatz ist, der lohnt, weiter verfolgt zu werden (Jedenfalls ist das Forum auf dem Handy ein Graus).
Auch scheint es mir nicht unbedingt sinnvoll, nur nach der Viewscreenhöhe zu entscheiden, denn so hat man im Hochformat die kleinere Schrift und im Breitformat eine größere, obwohl das vielleicht gar nicht notwendig wäre.
Ich bitte mal um Meinungen.
Matthias
--
1/z ist kein Blatt Papier.
1/z ist kein Blatt Papier.
-
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
-
Om nah hoo pez nyeetz, molily!
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.
Das bestätigt im Prinzip meine Bedenken. Bleibt die Frage, was dann mit dem Artikel im Wiki geschehen soll.
Matthias
--
1/z ist kein Blatt Papier.
-
Die Pixelbreite bleibt dabei gleich (320 mal 480 virtuelle Pixel), aber die Pixelrate (»device-width«) hat den Faktor 2.
Da habe ich mich verschrieben. Die device-width bleibt wie gesagt gleich, maximal 480px im Querformat. Das iPhone 4 ist in Media-Queries über (-webkit-)min-device-pixel-ratio: 2 erkennbar, denn die »device-pixel-ratio« beträgt 2. Über diesen Faktor kommt man dann auf 640 mal 960 physische Pixel.
Mathias
-