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

<link rel="apple-touch-icon" href="bilder/icon-ipad.png" sizes="72x72" />
<link rel="apple-touch-icon" href="bilder/icon-ipad-retina.png"
sizes="144x144" />
<link rel="apple-touch-icon" href="bilder/icon-iphone-retina.png"
sizes="114x114" />
<link rel="apple-touch-icon" href="bilder/icon-iphone.png" />
Listing 2.12 Die Verknüpfung der App-Icons im head-Bereich
Zwar verarbeiten beide Gerätetypen auch die kleineren Standardsymbole, allerdings
werden diese vergrößert und erscheinen unter Umständen verpixelt. Etwas anders
sieht dies bei Splash Screens aus. Retina-iPhones verarbeiten die gleiche Grafik wie
ältere Modelle. Für iPad-Apps allerdings müssen Sie einen eigenen Splash Screen mit
den Maßen 768 × 1.004 Pixel anlegen. Die gute Nachricht: Zusätzlich können Sie hier
eine Version für die Landscape-Ansicht anlegen - diese muss genau 1.024 × 748 Pixel
groß sein. Verwenden Sie folgenden Code zum Verknüpfen der Grafiken:
<link rel="apple-touch-startup-image" href="/bilder/splash-ipad-land-
scape.png" media="screen and (min-device-width: 481px) and (max-device-width:
1024px) and (orientation:landscape)" />
<link rel="apple-touch-startup-image" href="/bilder/splash-ipad-portrait.png"
media="screen and (min-device-width: 481px) and (max-device-width: 1024px)
and (orientation:portrait)" />
<link rel="apple-touch-startup-image" href="/bilder/splash-iphone.png" />
Listing 2.13 Die Definition von Splash Screens
Möglichkeiten auf Android
Auch auf Android-Geräten können Sie einige Anpassungen vornehmen, um die
Sharky-WebApp mehr wie eine native App aussehen zu lassen. Diese sind zwar offizi-
ell nicht so zahlreich wie unter iOS, aber mit ein paar Tricks erreichen sie ähnliche
Resultate.
Zunächst können Sie ebenfalls die Breite des Viewports auf die Breite des Geräts
anpassen und das Vergrößern/Verkleinern durch den Nutzer verhindern:
<meta name="viewport" content="width=device-width, initial-scale=1.0,
maximum-scale=1.0, user-scalable=0">
Auch unter Android können Sie ein Sharky-Lesezeichen zum Home-Bildschirm hin-
zufügen. Verknüpfen Sie dazu zunächst ihr App-Icon im head -Bereich ihres Doku-
ments. Offiziell gibt es dafür keine Android-spezifische Eigenschaft, sie können aber
den gleichen Code wie unter iOS verwenden: