WebApps für iPhone und iPad optimieren
- am 16. Dezember 2010
- von Jonas
- in Codeschnipsel
0
Einige nützliche Tipps, um eine “normale” Website in eine iOS und Android kompatible WebApp zu verwandeln.
Den Namen setzen
Den Namen der WebApp festlegen ist denkbar einfach: Es geschieht auf gleiche Weise wie bei “normalen” Webseiten.
<title>Meine WebApp</title>
Das Icon festlegen
Das Icon ist ein 57 x 57 Pixel großes PNG, welches auf dem iPhone und dem iPad auf dem Home Screen angezeigt wird. Auch wenn im Code apple-touch-icon geschrieben steht, so wird dieser trotzdem auch von anderen Systemen korrekt interpretiert, z.B. von Android.
Es gibt zwei Möglichkeiten das Icon festzulegen, welche sich jedoch nur im optischen Resultat voneinander unterscheiden.
<link rel="apple-touch-icon-precomposed" href="icon.png" />Bei dieser Variante wird das Icon so wie es ist (mit der Ausnahme das die Ecken abgerundet werden) auf dem Home Screen angezeigt.
<link rel="apple-touch-icon" href="icon.png" />Bei der zweiten Variante des Codes fügen iPhone und iPad dem Icon zusätzlich den bekannten “Apple Gloss”, also den Lichtreflex, hinzu.
Den Vollbildmodus nutzen
Es ist möglich, eigene WebApps im Vollbildmodus zu verwenden. Dabei wird die standardmäßig angezeigte graue Adressleiste von Safari ausgeblendet, sodass wesentlich mehr Bildschirm für die WebApp zur Verfügung steht.
<meta name="apple-mobile-web-app-capable" content="yes" />
Das Aussehen der Statusleiste
Wird die WebApp im Vollbildmodus verwendet, kann auch das Aussehen der Statusleiste am oberen Rand des Displays festgelegt werden.
<meta name="apple-mobile-web-app-status-bar-style" content="default" />Ist der Wert auf default gesetzt, so erscheint die Statusleiste normal. Wird der Wert auf black verändert, erhält die Leiste einen schwarzen Hintergrund; bei black-translucent wird sie leicht transparent und die WebApp verwendet auch den hinter der Statusleiste liegenden Platz zur Anzeige.
Automatisches markieren von Telefonnummern abschalten
Standardmäßig sucht Safari auf Webseiten nach Zeichenfolgen, wie Telefonnummern und markiert diese, um die Übernahme in das Adressbuch zu erleichtern. Da dieses Verhalten in WebApps unerwünscht sein kann, gibt es eine Möglichkeit dies abzuschalten.
<meta name="format-detection" content="telephone=no" />
Den Viewport festlegen
Diese Angabe legt die Höhe / Breite des Inhalts, den minimalen, maximalen Zoom-Wert und ob überhaupt gezoomt werden darf fest.
Es existieren folgende Einstellmöglichkeiten:
- width – Breite des Viewport in Pixel (200 – 10.000, Standard: 980)
- height – Höhe des Viewport in Pixel (223 – 10.000, Standard: Berechnet anhand der Breite und des Seitenverhältnisses des Displays)
- minimum-scale – Minimaler Zoom-Wert (>0 – 10, Standard: 0.25)
- maximum-scale – Maximaler Zoom-Wert (>0 – 10, Standard: 1.6)
- initial-scale – Anfänglicher Zoom-Wert (minimum-scale – maximum-scale)
- user-scalable – Legt fest, ob der Benutzer zoomen kann (yes / no, Standard: yes)
<meta name="viewport" content="width=device-width" />Die Breite des Viewport wird auf die Breite des Displays gesetzt.
<meta name="viewport" content="initial-scale=1.0" />Die Anwendung wird zunächst in Originalgröße angezeigt.
<meta name="viewport" content="initial-scale=2.3, user-scalable=no" />Die Anwendung wird in 2.3x Vergrößerung angezeigt; ein Ändern des Zooms ist nicht möglich.
