Unsere Snippets

Startup Bildschirm bei Webapp auf IOS Geräten

Die Möglichkeiten die sich mit webbasierten Apps auf HTML5 Basis machen lassen sind aufgrund der Tatsache, das vieles nur mit dem Safari Browser funktioniert noch nicht ganz alltagstauglich. 

WebApp oder native App

Da im Gegensatz bei einer nativen App die ja auf dem Gerät lokal gespeichert wird und somit schneller lädt, müssen bei einer WebApp erst die Daten angefordert werden aus dem Netz. Dabei entstehen natürlich Wartezeiten die man dem Anwender auch irgendwie mitteilen muss, ähnlich wie bei einem AJAX Request wo man ein animiertes GIF während des Ladevorganges angezeigt wird. 

Apple macht es möglich

Bei IOS Geräten wie dem IPad, IPod Touch und dem IPhone natürlich kann im HTML ein spezieller LinkTag gesetzt werden, der das jeweilige Endgerät entsprechend veranlasst eine PNG Grafik zu laden, die dem Benutzer mitteilt das die App noch nicht vollständig geladen ist. Voraussetzung ist dabei das die WebApp über den Homebildschirm gestartet wurde und nicht über den regulären Safari Browser.

Bisweilen kriegt man da etwas die grauen Haare da die einzelne Startup Bilder mit unterschiedlicher Syntax innerhalb des LinkTags angesprochen werden müssen, in Abhängigkeit zu dem jeweiligen Endgerät von Apple. Zudem müssen genaue Höhen und Breiten Abmessungen der Dateien eingehalten werden oder die Grafik wird nicht angezeigt.

Hier nun examplarisch die notwendige Syntax für das einblenden einer solcher Startup Grafik beim IPad.

<link rel="apple-touch-startup-image" href="startup_screen-1024x748.png" media="screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape)" />
<link rel="apple-touch-startup-image" href="startup_screen-768x1004.png" media="screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait)" />

Die Grafik musst dabei zwingend vom Format ein PNG sein und im "Potraitmodus"-Modus 768 Pixel breit und 1004 Pixel hoch sein und entsprechend 1024 Pixel breit und 748 Pixel hoch sein, wenn man die App im "Landscape"-Modus start. Die 20-Pixel Differenz zu den 768 Pixel Höhe oder 1004 Pixel Höhe je nach Modus, erklärt sich daher das immer die Statusleiste des IPad 20 Pixel an Platz wegnimmt.

Die Statusleiste im IPad kann man dabei im Gegensatz zu einer nativen APP nicht komplett ausblenden, woran man auch eine native APP von einer WebApp unterscheiden kann bisweilen.

Wie bereits beschrieben ist dieses Feature im Moment mit der hier beschriebenen Methode nur auf IOS Geräten benutzbar. 

Kategorie: HTML5 / Webapps
Ansprechpartner: Timo Prüssing (www.mediengarage.de)
« Zurück