Positionsbestimmung - Apps mit HTML5 und CSS3: Fur iPad, iPhone und Android - page 233

Je nachdem, ob eine Checkbox angewählt ist oder nicht, wird den entsprechenden
Restaurants in der Liste die Klasse versteckt hinzugefügt oder entfernt.

5.2.8 Der letzte Schliff
Ihre Geolocation-App ist nun einsatzbereit. Ihre WebApp zeigt nun eine Karte mit
Restaurants an und berechnet die Entfernungen korrekt zu Ihrer momentanen Posi-
tion. Testen Sie die App während der Entwicklung immer wieder auf Ihrem Smart-
phone, um sicherzustellen, dass alles so funktioniert, wie es soll. Allerdings sieht das
Ganze immer noch sehr nach einer Webseite aus, nicht zuletzt weil die Adressleiste
des Browsers permanent sichtbar ist. Fügen Sie einen JavaScript-Befehl ein, um die
Adressleiste zu verstecken:

5

window.scrollTo(0,1);

Natürlich sollten Sie außerdem verhindern, dass der Nutzer die Seite verkleinern
bzw. vergrößern kann, die Aktivierung des Vollbildmodus ist ebenfalls ratsam.
Schreiben Sie dazu, wie bereits beschrieben, Folgendes in den head -Bereich Ihres
HTML-Codes:

<meta name="viewport" content="width=device-width, initial-scale=1 ,
maximum-scale=1"/>
<meta name="apple-mobile-web-app-capable" content="yes" />

Außerdem sollten Sie ein schönes Symbol für den Home-Bildschirm (Abbildung 5.21)
sowie einen Ladebildschirm erstellen (Abbildung 5.22) und im head -Bereich des Doku-
ments verknüpfen:

<link rel="apple-touch-icon-precomposed"
href="/bilder/icon-ipad.png" sizes="72x72" />

<link rel="apple-touch-icon-precomposed"
href="/bilder/icon-iphone-retina.png" sizes="114x114" />

<link rel="apple-touch-icon-precomposed"
href="/bilder/icon-ipad-retina.png" sizes="114x114" />

<link rel="apple-touch-icon-precomposed"
href="/bilder/icon-iphone.png" />

<link rel="apple-touch-startup-image"
href="/bilder/splash-ipad-portrait.png" media="screen and (min-device-width:
481px) and (max-device-width: 1024px)" />