HTML and CSS Reference
In-Depth Information
icon114x114.png
). Diese Grafik speichern Sie im Hauptverzeichnis Ihrer Webseite auf
dem Server und fügen im
head
-Bereich Ihres HTML-Codes die folgende Zeile hinzu:
<link rel "apple touch icon" href "icon114x114.png"/>
Sie können optional auch ein Piktogramm mit den Maßen 57 x 57 erstellen, was einmal
die Originalgröße des iPhones war. Durch den hochauflösenden Bildschirm des iPhones
4 sieht die Variante mit 114 Bildpunkten besser aus und wird auf den älteren iPhones
gut heruntergerechnet. Wenn Sie nun die Webseite auf Ihrem iPhone aufrufen und das
Pluszeichen antippen, sehen Sie bereits im nächsten Bildschirm, dass Ihre neue Grafik als
Symbol verwendet wird.
Bild 1.41:
Eine
Webanwendung wird
dem Home-Bildschirm
hinzugefügt. Auf dem
Home-Bildschirm wird
die Anwendung wie
eine iPhone App
dargestellt.
Um jetzt beim Start den Safari-Browser auszublenden, brauchen Sie nur folgende Zeile
in den
head
-Bereich der Webseite einzubinden:
<meta name "apple mobile web app capable" content "yes" />
Dieses
meta
-Tag wird ebenfalls nur von Safari für das iPhone verstanden und von ande-
ren Browsern ignoriert, bewirkt aber, dass beim Antippen des gespeicherten Symbols
nur die Webanwendung aufgerufen wird - nicht aber die Safari-Bedienflächen. Sobald
der Benutzer eine Webanwendung, die mit diesem
meta
-Tag ausgestattet ist, auf seinem
Home-Bildschirm ablegt und wieder startet, bekommt er also nicht mehr die URL-Ein-
gabeleiste oder die Werkzeugleiste am unteren Bildschirmende des Safari-Browsers zu
sehen - genau wie bei einer richtigen iPhone-Anwendung.
Bild 1.42:
Die Safari-Bedienflächen sind verschwunden.
Deutlich wird das, wenn man, wie hier dargestellt, die
gesamte Seite nach unten zieht.
