HTML and CSS Reference
In-Depth Information
Bild 1.2:
Darstellung des Beispiels auf
einem iPhone ohne mobilspezifisches CSS.
Nicht schlecht, oder? Die Seite ist identisch mit der Seite auf dem PC, bringt aber auch
einige Probleme mit sich. Die Links in der Navigation sind kaum sichtbar und, da das
iPhone und viele andere moderne Handys mit dem Finger bedient werden, kaum ver-
lässlich selektierbar. Weiterhin ist die kleine Schrift schlecht zu lesen, insbesondere wenn
die gesamte Seite dargestellt wird. Man kann natürlich den Zoom benutzen, doch dann
muss man nicht nur vertikal, sondern auch horizontal scrollen, was den Spaß am Lesen
der Seite verdirbt.
Um diese Desktop-Seite nun in eine mobile Webseite zu verwandeln, bedarf sie nur ein
bisschen CSS und einer HTML-Änderung. Zwar hatten wir versprochen, dass der
HTML-Code nicht angefasst werden muss, doch wird der folgende Befehl von allen
nicht mobilen Browsern ignoriert und spielt nur für mobile Browser eine entscheidende
Rolle:
<meta name "viewport" content "width device width; initial scale 1.0;
maximum scale 1.0; user scalable 0;" />
Der Viewport eines Smartphones ist der Bereich, in dem eine Webanwendung sichtbar
laufen kann. Der Viewport einer PC-Webseite ist in der Regel die Größe des Browser-
fensters, das auch vom Benutzer vergrößert oder verkleinert werden kann. Beim iPhone
ist der Viewport wesentlich kleiner und auf die Bildschirmgröße des iPhones minus des
Bereichs für die Zeit- und Batterieanzeige, für die URL-Leiste und die untere Funk-
tionsleiste reduziert.
Den Viewport kann man am besten mit einem Stück Papier vergleichen, das über einem
Buch liegt und es abdeckt. Wenn Sie aus diesem Stück Papier ein Viereck ausschneiden
und es über das Buch schieben, ist dies ein ähnlicher Mechanismus wie der Viewport
eines mobilen Geräts.
Wenn Sie eine Webseite auf einem mobilen Gerät scrollen, wollen Sie etwas unbedingt
vermeiden: einen horizontalen Scroll. Bricht Ihre Webseite beim Hoch- und Runter-
scrollen jedes Mal links oder rechts aus und verdeckt dabei Inhalte, ist sie schwer zu
bedienen und wird nur wenig Liebhaber finden. Die Definition des Viewports mit dem
oben genannten
meta
-Tag bewirkt, dass der Viewport exakt auf die Bildschirmbreite
beschränkt wird.
