Unsere Erfahrungen mit Internet

Eine Webanwendung ist so konzipiert, dass sie ähnlich wie eine native Anwendung aussieht und sich verhält – zum Beispiel ist sie so skaliert, dass sie den gesamten Bildschirm unter iOS abdeckt. Sie können Ihre Webanwendung für Safari auf iOS noch weiter anpassen, indem Sie sie wie eine native Anwendung aussehen lassen, wenn der Benutzer sie zur Startseite hinzufügt. Hier erfahren Sie auch banale Dinge wie web de mail iphone einrichten und somit auf dem Handy immer die Mails abrufen zu können. Dies geschieht durch die Verwendung von Einstellungen für iOS, die von anderen Plattformen ignoriert werden.

Sie können beispielsweise ein Symbol für Ihre Webanwendung angeben, das sie darstellt, wenn sie dem Startbildschirm auf iOS hinzugefügt wird, wie unter Webseitensymbol für Webclip angeben beschrieben. Sie können die Safari auf der iOS-Benutzeroberfläche auch minimieren, wie unter Aussehen der Statusleiste ändern und Komponenten der Safari-Benutzeroberfläche ausblenden beschrieben, wenn Ihre Webanwendung über die Startseite gestartet wird. Dies sind alles optionale Einstellungen, die von anderen Plattformen ignoriert werden, wenn sie zu Ihren Webinhalten hinzugefügt werden.

Unter Ansichtsport-Einstellungen für Webanwendungen erfahren Sie, wie Sie das Ansichtsfenster für Webanwendungen unter iOS einstellen können.
Angeben eines Webseitensymbols für Webclip

Möglicherweise möchten Sie, dass Benutzer Ihre Webanwendung oder Ihren Webseitenlink zum Startbildschirm hinzufügen können. Diese Links, die durch ein Symbol dargestellt werden, werden als Webclips bezeichnet. Führen Sie diese einfachen Schritte aus, um ein Symbol anzugeben, das Ihre Webanwendung oder Webseite unter iOS darstellt.

Um ein Symbol für die gesamte Website (jede Seite der Website) anzugeben, legen Sie eine Symboldatei im PNG-Format im Root-Dokumentordner namens apple-touch-icon.png ab.

Um ein Symbol für eine einzelne Webseite anzugeben oder das Webseitensymbol durch ein Webseiten-spezifisches Symbol zu ersetzen, fügen Sie der Webseite ein Link-Element hinzu, wie in:

Ersetzen Sie im obigen Beispiel custom_icon.png durch den Dateinamen Ihres Symbols.

Um mehrere Symbole für verschiedene Geräteauflösungen anzugeben, unterstützen Sie beispielsweise sowohl iPhone- als auch iPad-Geräte und fügen jedem Verknüpfungselement ein Größenattribut wie folgt hinzu:

Es wird das Symbol verwendet, das die für das Gerät am besten geeignete Größe hat. Siehe Kapitel „Grafiken“ der iOS-Richtlinien für die Benutzeroberfläche für aktuelle Symbolgrößen und Empfehlungen.

Wenn es kein Symbol gibt, das der empfohlenen Größe für das Gerät entspricht, wird das kleinste Symbol verwendet, das größer als die empfohlene Größe ist. Wenn es keine Symbole gibt, die größer als die empfohlene Größe sind, wird das größte Symbol verwendet.

Wenn keine Symbole über ein Verknüpfungselement angegeben werden, wird im Stammverzeichnis der Website nach Symbolen mit dem Präfix apple-touch-icon…. gesucht. Wenn beispielsweise die passende Symbolgröße für das Gerät 58 x 58 ist, sucht das System nach Dateinamen in der folgenden Reihenfolge:

Hinweis: Safari unter iOS 7 fügt den Symbolen keine Effekte hinzu. Ältere Versionen von Safari fügen keine Effekte für Symboldateien hinzu, die mit dem Suffix -precomposed.png benannt sind. Siehe Erste Schritte: Identifizieren Ihrer App in iTunes Connect für weitere Informationen.

Festlegen eines Startbildschirms

Unter iOS können Sie, ähnlich wie bei nativen Anwendungen, ein Startbildschirmbild angeben, das beim Start Ihrer Webanwendung angezeigt wird. Dies ist besonders nützlich, wenn Ihre Webanwendung offline ist. Standardmäßig wird ein Screenshot der Webanwendung beim letzten Start verwendet. Um ein anderes Startbild einzurichten, fügen Sie der Webseite ein Link-Element hinzu, wie in:

Ersetzen Sie im obigen Beispiel launch.png durch den Dateinamen Ihres Startbildschirms. Im Kapitel „Grafiken“ der iOS-Richtlinien für die Benutzeroberfläche finden Sie aktuelle Größen und Empfehlungen für den Startbildschirm.
Hinzufügen eines Launch-Icon-Titels

Unter iOS können Sie einen Webanwendungs-Titel für das Startsymbol angeben. Standardmäßig wird das Tagverwendet. Um einen anderen Titel festzulegen, fügen Sie der Webseite ein Meta-Tag hinzu, wie in:

Ersetzen Sie im obigen Beispiel AppTitle durch Ihren Titel.
Ausblenden von Safari-Benutzeroberflächenkomponenten

Unter iOS, als Teil der Optimierung Ihrer Webanwendung, sollten Sie den Standalone-Modus verwenden, um mehr wie eine native Anwendung auszusehen. Wenn Sie diesen eigenständigen Modus verwenden, wird Safari nicht zur Anzeige des Webinhalts verwendet – insbesondere gibt es kein Textfeld für die Browser-URL oben auf dem Bildschirm oder eine Schaltflächenleiste unten auf dem Bildschirm. Am oberen Bildschirmrand erscheint nur eine Statusleiste. Lesen Sie unter Ändern der Darstellung der Statusleiste, wie Sie die Statusleiste minimieren können.

Stellen Sie den apple-mobile-web-app-fähigen Meta-Tag auf yes, um den Standalone-Modus einzuschalten. Das folgende HTML zeigt beispielsweise Webinhalte im Standalone-Modus an.

Sie können mit der Eigenschaft window.navigator.standalone read-only Boolean JavaScript festlegen, ob eine Webseite im Standalone-Modus angezeigt wird. Weitere Informationen zum Standalone-Modus finden Sie unter ap