Ulrichs Werkbank

Tipp: HTML-Seiten für Handys

2. Oktober 2016
von Ulrich Hilger

 

 

Wie schafft man es eigentlich, dass eine HTML-Seite auf dem Schlaufon ebenso aussieht wie auf dem Bildschirm eines Klapp- oder Tischrechners? Als Entwickler einer HTML-Seite hat man keinen direkten Einfluss darauf, da man die Gestaltung lediglich in deklarativer Form festlegt. Die Umsetzung der deklarierten Größen liegt beim Browser bzw. dem Programm, mit dem auf dem betreffenden Gerät die HTML-Seite dargestellt wird.

Worum geht es?

HTML und CSS liefern Möglichkeiten, einen Text zu gestalten. So ist es mit der CSS-Eigenschaft font-size möglich, die Größe anzugeben, die die Schrift eines Textes annehmen soll. Die vielen Möglichkeiten dieser Eigenschaft täuschen darüber hinweg, dass die Angabe font-size allein nicht reicht, um einen Text geräteübergreifend gleich groß darzustellen. Dasselbe gilt für alle anderen Größenangaben.

Zur Verdeutlichung rufe man eine HTML-Seite auf einem großen Bildschirm auf, rufe dieselbe Seite auf einem Schlaufon auf und halte das Fon neben den großen Bildschirm. Ist der Text auf beiden Geräten gleich groß, wurden die in diesem Tipp beschriebenen Mittel angewendet.

Voraussetzungen

Damit Elemente einer HTML-Seite auf verschiedenen Geräten gleich groß dargestellt werden, muss im Style Sheet auf die Verwendung von px (Pixel bzw. Bildpunkte) verzichtet werden. Ein Bildpunkt kann auf unterschiedlichen Geräten unterschiedlich groß sein, dieses Maß ist deshalb nicht geeignet. Besser sind Angaben in pt (Punkt), cm oder em. Hierbei hat em noch den zusätzliche Vorteil, eine relative Größenangabe zu sein. Sie ist entweder auf die Standardeinstellung des Browsers oder, sofern gesetzt, die Größe des html- oder body-Elements bezogen(1).

Mit der Kombination einer Größe in Punkt für html- oder body-Element und Größen in em für alle anderen Elemente schlägt man zwei Fliegen mit einer Klappe: Man ist unabhängig vom Gerät auf dem die Seite dargestellt wird. Zudem kann man mit einer Einstellung die Größe aller Elemente einer Seite ändern und dabei das Größenverhältnis aller Elemente zueinander beibehalten.

Geräteunabhängige Größendarstellung

Sind Größenangaben so gemacht wie beschrieben ist der Schlüssel zur geräteunabhängigen Größendarstellung die Verwendung eines Metatags: Im Kopf einer HTML-Seite, also als Unterelement des Elements head, muss das Element

<meta name="viewport" content="width=device-width, initial-scale=1.0"/>

eingetragen sein. Dies signalisiert dem Browser, dass die Größe des Fensterinhalts relativ zur Bildpunkt-Dichte des Anzeigegerätes dargestellt sein soll. Der Browser ermittelt erst zur Laufzeit die Dichte der Bildpunkte auf dem jeweils verwendeten Anzeigegerät und stellt alle Elemente der betreffenden Seite so dar, dass sie auf diesem Gerät die deklarierte Größe annehmen.

Fazit

Eine einfache Einstellung im Kopf einer HTML-Seite und eine sorgfältige Verwendung der Größenangaben genügen für eine geräteunabhäng einheitliche Größendarstellung. Die Verwendung von umfangreichen Frameworks ist allein dafür unnötig.

 

 

Fußnoten

(1) em kann auch auf ein übergeordnetes Element in einer Hierarchie von Elementen bezogen sein. Ist z.B. eine Punktgröße (pt) für den umschließenden Bereich (div) eines Paragraphen (p) gesetzt, gilt die relative Angabe em nur bezogen auf die Größenangabe des betreffenden Bereichs.

 

Quellen

A pixel is not a pixel
Viewport meta tag