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 Anerkennung honorierst:

Zahlung mit PayPal oder Kreditkarte.

Hinweis zur Verwendung

Die Übermittlung einer Zahlung ist eine persönliche Anerkennung Ihrerseits an den Entwickler (Christian Bartl, Privatperson). Eine Zahlung ist nicht zweckgebunden und es ist keine Gegenleistung zu erwarten. Bitte beachten Sie, dass für eine übermittelte Zahlung keine Quittung ausgestellt werden kann.

Über den Autor

Christian Bartl

Christian Bartl Projektmanagement & Konzeption für Online und Mobile

Als Technologie-Enthusiast und begeisterter Programmierer entwickle ich in meiner Freizeit Websites, Software und IT-Lösungen, die mir selbst und anderen den Alltag vereinfachen.

mehr auf bartl.me

Kommentare

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

Kommentar schreiben

Der hier angegebene Name wird gemeinsam mit deinem Kommentar auf der Website veröffentlicht.

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

Benachrichtigungen können jederzeit wieder abbestellt werden.

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

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