Configuration de Android Applications Web
les applications Web iPhone ont quatre fonctionnalités de configuration disponibles (n'incluant pas le 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.
- Vous pouvez spécifier l'icône de la page d'accueil.
- Vous pouvez spécifier une image de démarrage qui s'affiche pendant le chargement de la page Web.
- Vous pouvez masquer l'interface utilisateur du navigateur.
- Vous pouvez changer la couleur de la barre d'état.
Les quatre fonctionnalités fonctionnent en ajoutant des balises à la <head> 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" />
Naturellement, aucune de ces balises spécifiques à "Apple" ne fait quoi que ce soit dans Android. Mais existe-t-il un moyen de faire quelque chose d'équivalent? [Au minimum, je veux que les utilisateurs puissent ajouter ma page Web à leur écran d'accueil Android (par exemple dans Android 2.0) et avoir une jolie hi -res icône.]
Il s'agit d'une question datée, en tant que telle, la réponse a changé. Chrome sur les androïdes plus récents a ses propres balises META pour cela. Assurez-vous que vous ajoutez à 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 Apple, 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">
Lorsque vous créez un raccourci sur l'écran d'accueil vers un signet, Android utilise un Apple-touch-icon-precomposed si présent (mais pas Apple-touch-icon) sous forme d'icône haute résolution:
<link rel="Apple-touch-icon-precomposed" href="/custom_icon.png"/>
En ce qui concerne le reste des fonctionnalités, je ne pense pas qu'il existe actuellement un moyen de le faire sans publier une application Android qui agit comme un wrapper pour votre site Web.
Cela peut intéresser les lecteurs:
http://code.google.com/p/Android/issues/detail?id=7657
Dans 2.1-update1, sur le Droid, et je présume d'autres téléphones 2. * OS, lors de l'ajout d'un signet à l'écran d'accueil, l'écran d'accueil n'affiche une icône personnalisée que si le lien rel = "Apple-touch-icon" ou Apple-touch -icon-precomposed ont un chemin d'URL COMPLET.
J'ai essayé ce qui précède depuis mon Samsung Galaxy S1
Cela n'a pas fonctionné pour moi ... mais ce qui a fonctionné a d'abord été de créer un signet, puis d'ajouter ce signet comme raccourci vers ma maison. Cela a provoqué l'utilisation de l'icône correcte.
Il existe différents méta-éléments que nous pouvons utiliser pour obtenir les meilleurs résultats possibles:
Tout d'abord, nous devons définir la fenêtre d'affichage de notre application comme suit:
<meta name="viewport" content="width=device-width, initial-scale=1">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">Mettez-le simplement sous l'autre méta et il fera toute la magie.
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 existe deux principaux méta-éléments:
<meta name="Apple-mobile-web-app-capable" content="yes"> <meta name="Apple-mobile-web-app-status-bar-style" content="black-translucent">Cela fera que notre site Web sera ouvert en mode plein écran et stylera la barre d'état par défaut.
Nous en avons fini avec les méta-éléments "se comporter", commençons maintenant avec nos icônes. La quantité d'icônes et de lignes de code dépendra 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 "chargeur" agisse de même sur tous les appareils (principalement Apple appareils). Voici comment je l'ai fait:
<!--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)">REMARQUE: Le format doit être PNG et toutes les tailles doivent être respectées, sinon cela ne fonctionnera pas.
Pour terminer, nous aurons également 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--> <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">REMARQUE: Vous pouvez également utiliser "précomposé" pour que votre icône ne soit pas affichée avec l'éclat réfléchissant iOS. Ajoutez simplement ce mot où vous définissez rel comme suit:
<link rel="Apple-touch-icon-precomposed" href="../images/mobile-icon-57.png">
Comme 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).