HTML and CSS Reference
In-Depth Information
Sie sehen hier, dass wir mit
content "width device-width..."
keinen exakten
Zahlenwert angeben, da sich die Breite des Viewports beispielsweise ändert, wenn Sie
das iPhone drehen und der Webseiteninhalt im Querformat angezeigt wird. Die weite-
ren Parameter beschreiben, dass die Webseite in der Originalgröße angezeigt wird und
der Benutzer die Darstellung selbst nicht skalieren kann:
user-scalable 0
.
Allein durch diese eine Zeile verbessert sich die Lesbarkeit der Webseite enorm, da Safari
nicht versucht, die Seite in der kompletten Breite darzustellen, und eine besonders
kleine Zoomstufe für die Seite wählt.
Bild 1.3:
Webseite nach Verwendung
des Viewport-
meta
-Tags.
Die Seite berücksichtigt immer noch die in der CSS-Definition festgelegten Seiten-
abstände, wird aber nicht mehr automatisch »klein gezoomt« und lässt sich nicht mehr
seitlich, sondern nur noch nach oben und nach unten verschieben. Dennoch ist das
Design noch meilenweit von dem einer iPhone-Webanwendung entfernt. Aus diesem
Grund geht es jetzt an das CSS in der Datei
mobile.css
.
In fast allen iPhone-Webanwendungen wird die Titelleiste von den mitgelieferten
Anwendungen nachgebaut. Beispielsweise nutzt die iPod-Anwendung auf dem iPhone
die Titelleiste zur Hauptnavigation.
Navigation im Kopfbereich
Der Nachbau der Kopfleiste als Navigationsleiste ist vor allem sinnvoll, da Safari nach
dem Laden einer Webseite oder unter bestimmten Umständen (dazu später mehr) die
URL-Eingabeleiste ausblendet und nur noch die Kopfleiste als erstes Element sichtbar
bleibt. Dieses Verhalten finden Sie übrigens nicht nur im mobilen Safari-Browser, son-
dern auch bei seinen Kollegen auf WebOS-Geräten von Palm, den Android-Handys und
anderen Browserimplementierungen.
Mit dem folgenden CSS wird noch keine Schaltfläche in den Kopfbereich implementiert,
allerdings wird die Titelleiste nach der CSS-Behandlung schon wesentlich mehr nach
dem iPhone aussehen.
Zuerst wird der gesamte Seitenhintergrund auf einen Grauton gesetzt. Als Schriftart
nehmen wir die Standardschriftart des iPhones, Helvetica (
font-family: Helvetica
)
in einem sehr dunklen Grauton (
color: #222;
).
