Suche im Forum:
Suchen


Autor Nachricht
Beitrag06.07.2012 um 07:53 (UTC)    
Titel: Eigene WebAPP für iPhone/iPod

Hallo liebe Community,
mobiles Internet ist in aller Munde und daher habe ich mich einmal dazu entschieden, ein paar einfach Codezeilen zusammen zu fassen, die euch das erstellen einer WebAPP für iOS von eurer Homepage ermöglichen.

Arrow Was für Möglichkeiten bringt mir dieses Tutorial?
Als Endprodukt werdet ihr eine WebAPP inklusive Icon, Ladebildschirm und weiteren Optimierungen eurer Website auf dem Homescreen eures iPhones finden. Das ganze ohne die kostenpflichtige Registrierung im AppStore. Außerdem: Komplett mit Metatags!

Wo müssen die Metatags eingefügt werden?
Die Codezeilen müssen in das Extra "Eigener <head> Bereich" eingefügt werden. Dies ist die einzige Möglichkeit auf den Head-Bereich der Seite zugreifen zu können.


Die Scriptzeilen / Meta-Angaben einfügen


Die Grundscriptzeile, welche überhaupt ermöglicht eine WebAPP zugestalten
Zitat:
<meta name="apple-mobile-web-app-capable" content="yes">


Folgender Code legt die Ladegrafik für eure "WebAPP" fest
Rot = Hier kommt die URL deiner Ladegrafik hinein. Diese muss eine Größe von 320x460 Pixeln haben und im Format PNG vorliegen.
Zitat:
<link rel="apple-touch-startup-image" href="loading.png" />



Folgender Code legt das Icon für eure "WebAPP" fest
Rot = Hier kommt die URL deines Icon hinein. Dieses Icon hat optimaler Weise eine Größe von 32x32 Pixeln und muss ebenfalls im Format PNG vorliegen.
Zitat:
<link rel="apple-touch-icon" href="icon.png" />



Mit folgendem Code kannst du die Farbe der Statusbar am oberem Rand des iPhones ändern
Rot = Gültige Variabeln "black" und "white"
Zitat:
<meta name="apple-mobile-web-app-status-bar-style" content="black">




Mit folgendem Code kannst du den "Blickwinkel" o.a. Viewport des Besuchers ändern
Rot = Die minimale "Zoomgröße", die ein User wählen kann.
Grün = Die maximale "Zoomgröße" des Nutzers. Fügt man hier eine 1 ein, so ist kein Zoom auf dem iPhone möglich.
Blau = An dieser Stelle legst du die Breite der WebAPP fest. Ich setze dies immer auf die Standart Breite des Geräts. Eine Pixelangabe ist hier allerdings auch möglich!
Zitat:
<meta name="viewport" content="user-scalable=no, minimum-scale=1, maximum-scale=1, width=device-width" />





Kein Vollwertige "App" in dem Sinne, allerdings kostenlos und auch relativ einfach zu erstellen. Ich hoffe, euch hat dieses Tutorial geholfen und freue mich natürlich auch über Rückmeldungen Smile!

Beitrag editiert von find-templates.de.tl


Zuletzt bearbeitet von matsk am 10.03.2016, 20:40, insgesamt 7-mal bearbeitet
Beiträge der letzten Zeit anzeigen:   


Powered by phpBB © 2001, 2005 phpBB Group
Deutsche Übersetzung von phpBB.de