Artikel:Schriftgröße dynamisch anpassen
Aus SELFHTML-Wiki
Dieser Artikel beschreibt eine Möglichkeit, die Schriftgröße eines Webdokuments dynamisch an die Anforderungen kleiner Viewscreens, beispielsweise mobiler Endgeräte, anzupassen.
Webautoren sollten berücksichtigen, dass es um die Lesbarkeit ihrer Seiten auf kleinen Bildschirmen sehr schlecht bestellt sein könnte. Ein Zoomen des gesamten Inhalts behebt zwar diese Schwachstelle, hat jedoch den Nachteil, dass die Seite nun in beide Richtungen gescrollt werden muss, was insgesamt dem Bedienkomfort nicht förderlich ist. Eine mögliche Lösung wäre die Anpassung des Verhältnisses Schriftgröße - Viewporthöhe.
Inhaltsverzeichnis |
[Bearbeiten] Voraussetzungen
Neben guten Kenntnissen der Technologien HTML, CSS und Javascript werden hier auch Fähigkeiten im Umgang mit der JavaScript-Klassenbibliothek „Prototype“ benötigt.
[Bearbeiten] Zielsetzung
Die Schriftgröße der mobilen Version der Webseite soll so angepasst werden, dass bei jeder Bildschirmauflösung entsprechend maximierend skaliert wird.
[Bearbeiten] Vorgehensweise
Über die Javascript Klasse screen kommt man an die Bildschirmauflösung. screen.width für die Breite und screen.height für die Höhe.
Theoretisch muss man lediglich beim Laden des Dokuments von einer bestimmten Auflösung und der Schriftgröße bei dieser Auflösung ausgehen. Dann rechnet man per Dreisatz die Schriftgröße für die aktuelle Auflösung um.
