it-swarm.com.de

Konfigurieren von Android Webanwendungen

für iPhone-Webanwendungen stehen vier Konfigurationsfunktionen zur Verfügung (ohne den HTML5-Anwendungscache), um das Verhalten von Webseiten zu konfigurieren, wenn Sie die Webseite auf dem Startbildschirm als Lesezeichen speichern.

  1. Sie können das Homepage-Symbol angeben.
  2. Sie können ein Startbild angeben, das angezeigt wird, während die Webseite geladen wird.
  3. Sie können die Browser-Benutzeroberfläche ausblenden.
  4. Sie können die Farbe der Statusleiste ändern.

Die vier Funktionen fügen dem <head> Tags wie folgt hinzu:

<link rel="Apple-touch-icon" href="/custom_icon.png"/>
<link rel="Apple-touch-startup-image" href="/startup.png">
<meta name="Apple-mobile-web-app-capable" content="yes" />
<meta name="Apple-mobile-web-app-status-bar-style" content="black" />

Natürlich kann keines dieser "Apple" -spezifischen Tags in Android etwas bewirken. Aber gibt es eine Möglichkeit, etwas Äquivalentes zu tun? [Ich möchte zumindest, dass Benutzer meine Webseite zu ihrem Android - Startbildschirm hinzufügen können (z. B. in Android 2.0) und ein hübsches hochauflösendes Symbol haben.]

64
Dan Fabulich

Dies ist eine veraltete Frage, da sich die Antwort geändert hat. Chrome auf neueren Androids hat dafür eigene Meta-Tags. Stellen Sie sicher, dass Sie Zum Startbildschirm hinzufügen und vom Startbildschirm aus starten. Ein normales Lesezeichen reicht nicht aus. Chrome verwendet derzeit einige der Apple - Direktiven, aber die drei unten sind die Magie von Android.

<meta name="Apple-mobile-web-app-capable" content="yes">
<meta name="Apple-mobile-web-app-status-bar-style" content="black">
<link rel="Apple-touch-startup-image" href="startup.png">
<link rel="Apple-touch-icon" href="youricon.png"/>
<link rel="Apple-touch-icon-precomposed" sizes="128x128" href="youricon.png">

<meta name="mobile-web-app-capable" content="yes">
<link rel="shortcut icon" sizes="196x196" href="youriconhighres.png">
<link rel="shortcut icon" sizes="128x128" href="youricon.png">
27
David C

Wenn Sie auf dem Startbildschirm eine Verknüpfung zu einem Lesezeichen erstellen, verwendet Android ein Apple-touch-icon-precomposed falls vorhanden (aber nicht Apple-touch-icon) als hochauflösendes Symbol:

<link rel="Apple-touch-icon-precomposed" href="/custom_icon.png"/>

Was den Rest der Funktionen angeht, gibt es meiner Meinung nach derzeit keine Möglichkeit, dies zu tun, ohne eine Android App zu veröffentlichen, die als Wrapper für Ihre Website fungiert.

45
Trevor Johns

Dies könnte für Leser von Interesse sein:

http://code.google.com/p/Android/issues/detail?id=7657

In 2.1-Update1 wird auf dem Droid und vermutlich auf anderen 2. * OS-Telefonen beim Hinzufügen eines Lesezeichens zum Startbildschirm auf dem Startbildschirm nur dann ein benutzerdefiniertes Symbol angezeigt, wenn der Link rel = "Apple-touch-icon" oder Apple-touch lautet -icon-precomposed hat einen VOLLSTÄNDIGEN URL-Pfad.

22
adam.lofts

Ich habe es mit meinem Samsung Galaxy S1 versucht

Funktionierte nicht für mich ... aber was funktionierte, war zuerst ein Lesezeichen zu erstellen und dieses Lesezeichen dann als Verknüpfung zu meinem Zuhause hinzuzufügen. Dadurch wurde das richtige Symbol verwendet.

2
julianb

Es gibt verschiedene Metaelemente, mit denen wir die bestmöglichen Ergebnisse erzielen können:

  1. Als erstes müssen wir das Ansichtsfenster für unsere App so einstellen:

    <meta name="viewport" content="width=device-width, initial-scale=1">
    

    Hier gibt es einen kleinen Hack für Geräte mit größeren Bildschirmen (zum Beispiel iPhone 5):

    <meta name="viewport" content="initial-scale=1.0">
    

    Setzen Sie es einfach unter das andere Meta und es wird die ganze Magie machen.

  2. Nachdem wir die Grundlagen kennen, werden wir die mobilen Browser anweisen, unsere Website so zu "lesen", als wäre es eine App. Es gibt zwei Hauptmetaelemente:

    <meta name="Apple-mobile-web-app-capable" content="yes">
    <meta name="Apple-mobile-web-app-status-bar-style" content="black-translucent">
    

    Dadurch wird unsere Website im Vollbildmodus geöffnet und als Standardstatusleiste eingerichtet.

  3. Wir sind mit den "verhaltenen" Metaelementen fertig und beginnen jetzt mit unseren Symbolen. Die Anzahl der Symbole und Codezeilen hängt völlig von Ihnen ab. Für das Start-Image habe ich lieber ein Icon für jede Auflösung erstellt, damit mein "Loader" auf allen Geräten gleich funktioniert (hauptsächlich Apple Geräte). So habe ich es gemacht:

    <!--iPhone 3GS, 2011 iPod Touch-->
    <link rel="Apple-touch-startup-image" href="../images/mobile-icon-startup-320-460.png" media="screen and (max-device-width : 320px)">
    
    <!--iPhone 4, 4S and 2011 iPod Touch-->
    <link rel="Apple-touch-startup-image" href="../images/mobile-icon-startup-640x920.png" media="(max-device-width : 480px) and (-webkit-min-device-pixel-ratio : 2)">
    
    <!--iPhone 5 and 2012 iPod Touch-->
    <link rel="Apple-touch-startup-image" href="../images/mobile-icon-startup-640x1096.png" media="(max-device-width : 548px) and (-webkit-min-device-pixel-ratio : 2)">
    
    <!--iPad landscape-->
    <link rel="Apple-touch-startup-image" sizes="1024x748" href="../images/mobile-icon-startup-1024x768.png" media="screen and (min-device-width : 481px) and (max-device-width : 1024px) and (orientation : landscape)">
    
    <!--iPad Portrait-->
    <link rel="Apple-touch-startup-image" sizes="768x1004" href="../images/startup-768x1004.png" media="screen and (min-device-width : 481px) and (max-device-width : 1024px) and (orientation : portrait)">
    

    HINWEIS: Das Format muss PNG sein und alle Größen müssen eingehalten werden, sonst funktioniert es nicht.

  4. Zum Abschluss benötigen wir noch einige Icons für unsere App. Dieses Symbol wird im Gerätemenü angezeigt. So habe ich es gemacht:

    <!--iPhone 3GS, 2011 iPod Touch and older Android devices-->
    <link rel="Apple-touch-icon" href="../images/mobile-icon-57.png">
    
    <!--1st generation iPad, iPad 2 and iPad mini-->
    <link rel="Apple-touch-icon" sizes="72x72" href="../images/mobile-icon-72.png">
    
    <!--iPhone 4, 4S, 5 and 2012 iPod Touch-->
    <link rel="Apple-touch-icon" sizes="114x114" href="../images/mobile-icon-114.png">
    
    <!--iPad 3rd and 4th generation-->
    <link rel="Apple-touch-icon" sizes="144x144" href="../images/mobile-icon-144.png">
    

    HINWEIS: Sie können auch "vorkomponiert" verwenden, damit Ihr Symbol nicht mit reflektierendem iOS-Glanz angezeigt wird. Fügen Sie einfach dieses Wort hinzu, in dem Sie rel folgendermaßen definieren:

    <link rel="Apple-touch-icon-precomposed" href="../images/mobile-icon-57.png">
    

Wie gesagt, dies funktioniert besser auf Apple Geräten. Aber das App-Symbol wurde auf Android Geräten getestet und funktioniert auch auf.

1
Javier Viola