HTML5 in der mobilen Webentwickung - Apps mit HTML5 und CSS3: Fur iPad, iPhone und Android - page 60

Nun können Sie Ihren Lieblings-Jaguarhai zum Home-Bildschirm hinzufügen. Tip-
pen Sie dazu in Safari das mittlere Symbol in der Toolbar an, und wählen Sie Zum
Home-Bildschirm aus. Anschließend wird Ihnen eine Vorschau Ihres App-Icons
angezeigt. Sie haben hier auch die Möglichkeit, den Namen zu ändern. Klicken Sie
nun auf Hinzufügen. Sharky erscheint nun als Lesezeichen neben Ihren Apps auf
dem Home-Bildschirm. Der für iOS typische Glanzeffekt und die abgerundeten Ecken
werden automatisch hinzugefügt. Tippen Sie nun das Symbol an: Sharky wird im
Vollbildmodus ohne Adressleiste und Toolbar geöffnet (Abbildung 2.22).
Abbildung 2.22 Das Hinzufügen zum Home-Bildschirm (links) und Ihre WebApp ohne
Adressleiste (rechts) auf einem iPhone im oberen Bildbereich. Auf den beiden Abbildungen
ganz rechts sehen Sie die Darstellung auf einem Android-Smartphone.
Trotz Vollbildmodus ist die Statusleiste permanent sichtbar - dies lässt sich leider
nicht deaktivieren. Passend zum Design Ihrer App können Sie aber ihre Farbe variie-
ren. Fügen Sie folgendes meta -Element in den head -Bereich ein:
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
Schließen Sie nun Ihre Sharky-App, und öffnen Sie sie wieder. Statt der grauen Status-
leiste erscheint nun eine etwas dezentere schwarze Variante mit weißem Text. Mög-
lich sind folgende Werte:
default - graue Standardleiste
black - schwarze Statusleiste mit weißem Text
black-translucent - schwarze halbtransparente Statusleiste
Während Ihre WebApp lädt, zeigt ihr iPhone einen weißen Bildschirm an. Dieser
bleibt solange sichtbar, bis alle benötigten Dateien vom Server heruntergeladen und
auf dem Gerät gerendert sind. Anstelle des weißen Bildschirms können sie aber auch