HTML5 in der mobilen Webentwickung - Apps mit HTML5 und CSS3: Fur iPad, iPhone und Android - page 58

keiten kann die Gestaltung solch eines Verlaufs ohne Hilfsmittel kompliziert und
unübersichtlich werden. Verwenden Sie deshalb einen Verlaufsgenerator, wie z. B.
http://gradients.glrzad.com . Dort können Sie über eine Bedienoberfläche Farbe,
Position und alle weiteren Werte einfach einstellen. Die Webseite gibt dann den fer-
tig generierten Code aus, den Sie einfach für Ihre WebApp übernehmen können.
Sehr praktisch und zeitsparend!
Performance
Neben diesen neuen Eigenschaften ist in iOS 5 besonders die Performance erheblich
verbessert worden. Das canvas -Element, welches Sie im späteren Verlauf kennenler-
nen werden, profitiert besonders von diesem Geschwindigkeitsschub und ist in Tests
teilweise fünfmal so schnell wie in vorherigen iOS-Versionen. Auch die JavaScript-
Performance wurde beachtlich verbessert. Es lohnt sich also für iOS 5 zu entwickeln.
2.4.3 Von der Webseite zur WebApp
Zusätzlich zu den bereits erwähnten Features von HTML5 bieten Mobilbrowser die
Möglichkeit, ihr Dokument für den mobilen Einsatz zu optimieren. Dafür gibt es
einige Eigenschaften, die nicht zum offiziellen Standard gehören. Im Folgenden ler-
nen Sie, wie Sie mit wenigen Einstellungen Ihre Sharky-WebApp so verändern, dass
sie einer nativen App schon sehr nahe kommt.
Apple-spezifische HTML-Elemente und Eigenschaften
Feste Breite
Bei den Designanpassungen zu Beginn dieses Kapitels haben Sie bereits die Breite
Ihrer Sharky-WebApp über ein meta -Tag festgelegt. Sie erinnern sich? Im Folgenden
gehen wir nochmal etwas detaillierter darauf ein:
Sie haben unter iOS die Möglichkeit, festzulegen, wie breit der sichtbare Bereich, der
Viewport, Ihrer Website sein soll. Mit folgendem Code würde der Inhalt Ihrer
WebApp mit einer Breite von 640 Pixel, der exakten Breite eines iPhone Retina-Dis-
plays, angezeigt werden:
<meta name="viewport" content="width=640"/>
Wenn Sie ihr Gerät nun in die Landscape-Ausrichtung drehen, wird die Website ent-
sprechend vergrößert. Das ist nicht sehr schön, und deswegen raten wir Ihnen, dem
Browser zu sagen, dass er die Seite immer in der jeweiligen Breite des Geräts darstel-
len soll. Sie haben diesen Teil bereits in die Sharky-WebApp integriert: