Damit unter iOS eine Website am Dashboard als Icon angelegt werden kann bedarf es nur ergänzenden Meta-Informationen im HTML-Header.

Website als App definieren

Des folgenden Meta-Attribut gibt iOS die Anweisung die Website als App behandeln zu können. Dadurch wird dem Nutzer innerhalb von Safari die Option eine Verknüpfung der Website auf das Dashboard zu erstellen angezeigt.

<meta name="apple-mobile-web-app-capable" content="yes" />

Icon für das Dashboard

Damit wir alle Auflösungsdichten der unterschiedlichen iPhone und iPad-Modelle abdecken muss das Logo in 3 verschiedenen Auflösungen eingebunden werden.

<link rel="apple-touch-icon" href="/ios/icon/ios57.png" />
<link rel="apple-touch-icon" sizes="72x72" href="/ios/icon/ios72.png" />
<link rel="apple-touch-icon" sizes="114x114" href="/ios/icon/ios114.png" />

Startup-Screen

Während die Seite geladen wird bzw. die Applikation gestartet wird kann ein Bild als Startup-Screen angezeigt werden.

<link rel="apple-touch-startup-image" href="/ips/startup.png">

Viewport

Für eine optimale Darstellung empfiehlt es sich den Viewport für die eigene Website zu definieren. Das unten stehende Beispiel setzt den Viewport auf die Auflösung des Gerätes - diese Einstellung empfiehlt sich für Websites mit Fluid-Design.

<meta name="viewport" content="width=device-width, height=device-height, user-scalable=yes, initial-scale=1.0" />

Link-Handling

Zu beachten ist, dass alle Links mit einer absoluten Pfad-Angabe aus der App heraus mit Safari geöffnet werden. D.h. sämtliche interne Links dürfen nur relativ angegeben werden. Unterstützen kann folgendes JS-Snippet eingesetzt werden: https://gist.github.com/1042026