Configuration des applications Web Android

Question

Les applications Web de l'iPhone ont quatre configuration features disponibles (à l'exception du cache d'application HTML5) pour configurer le comportement des pages Web lorsque vous enregistrez la page Web sur l'écran d'accueil en tant que signet.

1. Vous pouvez spécifier l'icône de la page d'accueil.
2. Vous pouvez spécifier une image de démarrage qui s'affiche pendant le chargement de la page Web.
3. Vous pouvez masquer l'interface utilisateur du navigateur.
4. Vous pouvez modifier la couleur de la barre d'état.

Les quatre caractéristiques fonctionnent en ajoutant des balises à la tête < > comme ceci:

<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" /> 

Bien sûr, aucun de ces « balises spécifiques » pommiers quoi que ce soit dans Android. Mais y a-t-il un moyen de faire quelque chose d'équivalent? [Au minimum, je souhaite que les utilisateurs puissent ajouter ma page Web à leur écran d'accueil Android (par exemple dans Android 2.0) et avoir une jolie icône haute résolution.]

Answer 1

Ceci est une question datée, en tant que telle la réponse a changé. Chrome sur androids plus récents a ses propres balises META pour cela. Assurez-vous d'ajouter à l'écran d'accueil, et lancez à partir de l'écran d'accueil. Un signet normal n'est pas suffisant. Chrome utilise actuellement quelques-unes des directives de la pomme, mais les trois en bas sont la magie 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"> 

Answer 2

Lorsque vous créez un raccourci sur l'écran d'accueil à un signet, Android utilisera un apple-touch-icon-precomposed si elle est présente (mais pas apple-touch-icon) comme icône haute résolution:

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

pour le reste des caractéristiques, je ne pense pas qu'il y ait une façon de le faire à présente sans publier une application Android qui sert de wrapper pour votre site Web.

Answer 3

Cela peut intéresser les lecteurs:

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

En 2.1 Update1, sur le Droid, et je présume que d'autres 2. * téléphones OS, lors de l'ajout d'un signet à l'écran d'accueil, l'écran d'accueil affiche uniquement une icône personnalisée si le lien rel = "apple-touch-icon" ou apple-touch-icon-precomposed a un chemin d'URL FULL.

Answer 4

J'ai essayé ci-dessus de mon Samsung Galaxy S1

ne fonctionne pas pour moi ... mais qu'est-ce que le travail a été d'abord créer un signet, puis en ajoutant que signet comme un raccourci vers ma maison. Cela a provoqué l'utilisation de l'icône correcte.

Answer 5

Il existe différents éléments méta que nous pouvons utiliser pour obtenir les meilleurs résultats possibles:

1a) Tout d'abord, nous devons définir la fenêtre pour notre application comme ceci:
<meta name="viewport" content="width=device-width, initial-scale=1">

1b) Il y a un petit hack ici, pour les appareils avec des écrans plus grands (iPhone 5 par exemple):
<meta name="viewport" content="initial-scale=1.0">
Il suffit de le mettre sous l'autre méta et il fera toute la magie .

2) Maintenant que nous avons les bases, nous dirons aux navigateurs mobiles de "lire" notre site web comme s'il s'agissait d'une application. Il y a deux principaux éléments: méta
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
Cela rendra notre site Web à ouvrir en plein écran en mode et le style de la barre d'état par défaut.

3) Nous en avons fini avec les méta-éléments "se comportant", maintenant commençons par nos icônes. Le nombre d'icônes et de lignes de code dépend totalement de vous. Pour l'image de démarrage, j'ai préféré créer une icône pour chaque résolution, afin que mon "loader" agisse de la même manière sur tous les appareils (principalement les appareils Apple). Voilà comment je l'ai fait:

*<!--iPhone 3GS, 2011 iPod Touc-->* <br> 
`<link rel="apple-touch-startup-image" href="../images/mobile-icon-startup-320-460.png" media="screen and (max-device-width : 320px)">` <br> 

*<!--iPhone 4, 4S and 2011 iPod Touch-->* <br> 
`<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)">` <br> 

*<!--iPhone 5 and 2012 iPod Touch-->* <br> 
`<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)">` <br> 

*<!--iPad landscape-->* <br> 
<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)"> <br> 

*<!--iPad Portrait-->* <br> 
`<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)">` <br> <br> 

REMARQUE: Le format doit être PNG et toutes les tailles doivent être respectées, sinon cela ne fonctionnera pas.

4) Pour finir, nous aurons aussi besoin de quelques icônes pour notre application. Cette icône sera affichée dans le menu des appareils. Voici comment je l'ai fait:

*<!--iPhone 3GS, 2011 iPod Touch and older Android devices-->* <br> 
`<link rel="apple-touch-icon" href="../images/mobile-icon-57.png">` <br> 

*<!--1st generation iPad, iPad 2 and iPad mini-->* <br> 
`<link rel="apple-touch-icon" sizes="72x72" href="../images/mobile-icon-72.png">` <br> 

*<!--iPhone 4, 4S, 5 and 2012 iPod Touch-->* <br> 
`<link rel="apple-touch-icon" sizes="114x114" href="../images/mobile-icon-114.png">` <br> 

*<!--iPad 3rd and 4th generation-->* <br> 
`<link rel="apple-touch-icon" sizes="144x144" href="../images/mobile-icon-144.png">` <br> 

REMARQUE: Vous pouvez également utiliser « précomposé » pour l'icône ne doit pas être montré avec iOS éclat réfléchissant. Il suffit d'ajouter ce mot où vous définissez rel comme si:
<link rel="apple-touch-icon-precomposed" href="../images/mobile-icon-57.png">

Comme l'a dit, cela fonctionne mieux sur les appareils Apple. Mais l'icône de l'application a été prouvée sur les appareils Android et cela fonctionne.