Ich weiss, die Überraschung wird sich in Grenzen halten wenn ich mich jetzt als iPhone 4 Nutzer oute. Mir doch egal! Zuvor hatte ich bereits ein iPhone 3G, und habe mich ein wenig mit dem Thema Webapps für das iPhone auseinandergesetzt, das ist schon ‘ne coole Sache: Man macht eine Seite mit einem Framework wie iWebkit zum Beispiel, würzt dies mit etwas Serverseitigem Scripting und so, ruft das Ergebnis im Mobile Safari auf, fügt es auf den Home Bildschirm hinzu – Fertig ist die eigene Webapp mitsamt Icon und Splash Screen. Flippig, nicht?
Das iPhone 4 mit Retina Display
All die lustigen iPhone spezifischen Sachen wie das Homescreen Icon, den Splash und vieles mehr lässt sich über metatags steuern, hierzu sei an die Developer Seite von Apple verwiesen. Aber einen Haken hat das ganze, wenn man eine Webapp z.B. für iPhones mit Retina Display und welche ohne entwickeln möchte. Das sogenannte Retina Display vom iPhone 4 hat nämlich mega viele Pixel, und stellt 326dpi dar. Leider gibt es aber keine bequeme Möglichkeit dass man sagen könnte nimm Bild-X für den Splash für das iPhone ohne Retina, nimm Bild-Y für das iPhone mit Retina Display. Doch mit ein wenig Javascript kann dem Problem ganz einfach Abhilfe geschaffen werden, und Jedes Gerät bekommt den Content der darauf am besten aussieht:
function isRetina() { if (window.devicePixelRatio >= 2) /* iPhone 4 w/ Retina Display */ { var tag = document.createElement("link"); tag.rel = "apple-touch-startup-image"; tag.href= "images/splashx2.png"; } else { var tag = document.createElement("link"); /* other iPhones */ tag.rel = "apple-touch-startup-image"; tag.href= "images/splash.png"; } document.getElementsByTagName('head')[0].appendChild(tag); }
Jetzt muss man nur noch diese Funktion auf der HTML Seite aufrufen (ich mache dies mit <body onload=”"> ). Man kann das natürlich beliebig erweitern, und z.B. ein anderes CSS Stylesheet für das iPhone 4 mit Retina Display einbinden, und so weiter. Glücklicherweise ist die Sache mit dem Homescreen Icon nicht so ein Murks, da reicht es wenn man das Icon gleich als 114×114 Pixel entwickelt: Das iPhone 3G skaliert es herunter, und auf dem iPhone 4 ist’s genau richtig
So einfach kann man eine iPhone Webapp erstellen..
Schade ist die Splash Screen Geschichte bei den iPhone Webapps so bitchig was die Grösse etc. betrifft, auch Animationen als mng oder gif wären toll. Und da das Splash und das Homescreen Icon auf dem Gerät gespeichert werden, wäre es auch schön, wenn Apple an eine möglichkeit gedacht hätte, dass die Freshness vom Icon/Splash geprüft – und bei einer Änderung auf dem Server aktualisiert wird!
Adé und frohes Fest!
Ich bin noch bei 3G – alles geht halt nicht.
Weisst du zufällig wie das App heisst, das man an den EAN-Code halten kann?
Oh, da gibts viele
barcoo, red laser.. Am besten suchste im appstore nach barcode, da findest du bestimmt was!
Hey, frohes fest und so
Dann will ich das mal machen – danke.
Ja, das wünsche ich dir auch – und Geschenke *GG*