blog.bartlweb - a technologist's external brain

Website als iPhone bzw. iPad-App

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

Dieser Artikel hat dir deinen Tag gerettet?
... und mühevolles Probieren, Recherchieren und damit Stunden an Zeit gespart? ... oder einfach nur dein Problem gelöst?

Dann würde ich mich freuen, wenn Du meine Zeit für die Erstellung dieses Blogartikels mit einer kleinen Spende honorierst:

Kommentare

Noch kein Kommentar vorhanden.
Sei der Erste - ich freue mich über deine Anmerkungen, Kritik und Fragen.

Kommentar schreiben

Deine E-Mailadresse wird nur für Benachrichtigungen und Rückfragen verwendet und wird nicht veröffentlicht.

Benachrichtigungen können jederzeit wieder abbestellt werden.

Bitte tippe die Zahlenkombination "7313" ein, nur dann kann ich deinen Kommentar entgegennehmen.

Bitte fülle dieses Feld nicht aus, nur dann kann ich deinen Kommentar entgegennehmen.