64 votes

Dan Fabulich avatar

Configuration des applications Web Android

Demandé el 23 de Décembre, 2009
Quand la question a-t-elle été
36496 affichage
Nombre de visites la question a
5 Réponses
Nombre de réponses aux questions
Résolu
Situation réelle de la question

Les applications web de l'iPhone ont quatre fonctions de configuration disponibles (sans compter le cache de l'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 fonctionnalités fonctionnent en ajoutant des balises au <head> comme ceci :

<link rel="apple-touch-icon" href="http://stackoverflow.com/custom_icon.png"/>
<link rel="apple-touch-startup-image" href="http://stackoverflow.com/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 "apple-" spécifiques 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 icône en haute résolution).

Demandé el 23 de Décembre, 2009 par Dan Fabulich

Réponses

Trop de publicités?

45voto

Trevor Johns avatar
Trevor Johns Points 9310

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

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

En ce qui concerne le reste des fonctionnalités, je ne pense pas qu'il y ait actuellement un moyen de le faire sans publier une application Android qui agit comme une enveloppe pour votre site Web.

Répondu el 23 de Décembre, 2009 par Trevor Johns (9310 Points )

3 votes

Avatar de Dan Fabulich

Cela ne semble pas fonctionner sur le HTC Evo ; cela ne fonctionne probablement pas sur les appareils HTC Sense UI.

Commenté el 29 de Juin, 2010 par Dan Fabulich

1 votes

Avatar de Trevor Johns

Cela devrait fonctionner si vous désactivez le lanceur HTC Sense et utilisez le lanceur AOSP à la place. (Les appareils HTC Sense sont en fait livrés avec les deux lanceurs installés.) Dans tous les cas, merci pour vos commentaires. C'est bon à savoir. J'ai créé un bogue pour examiner cette possibilité d'inclusion dans les futures versions de la CDD Android. (b/2811198)

Commenté el 30 de Juin, 2010 par Trevor Johns

2 votes

Avatar de pkyeck

Je viens d'essayer avec mon Nexus7 - mais pas de chance. J'affiche une icône de signet très moche avec la favicon trop petite au milieu ... :(

Commenté el 21 de Janvier, 2013 par pkyeck
Afficher 1 autres commentaires

29voto

David C avatar
David C Points 1462

Il s'agit d'une question qui date, et la réponse a donc changé. Chrome sur les androïdes les plus récents possède ses propres balises méta pour cela. Assurez-vous de l'ajouter à l'écran d'accueil et de le lancer depuis 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 d'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">
Répondu el 27 de Novembre, 2013 par David C (1462 Points )

22voto

adam.lofts avatar
adam.lofts Points 467

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 url COMPLET.

Répondu el 4 de Octobre, 2010 par adam.lofts (467 Points )

0 votes

Avatar de Kiquenet

Quelle est la taille de l'icône (pour mon application web de signets) dont j'ai besoin pour Android ? Peut-être pour Apple : 320x460, 640x920, 640x1096, 72x72, 114x114, 144x144, 768x1004, 1024x748

Commenté el 22 de Avril, 2016 par Kiquenet

0 votes

Avatar de Kiquenet

Selon developer.chrome.com/multidevice/Android/installtohomescreen les tailles pour Android sont 36x36, 48x48, 72x72, 96x96, 144x144, 192x192 peut-être aussi 128x128

Commenté el 22 de Avril, 2016 par Kiquenet

2voto

Javier Viola avatar
Javier Viola Points 11

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

  1. Tout d'abord, nous devons définir le viewport 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">

    Il suffit de le placer sous l'autre méta et il fera toute la magie.

  2. Maintenant que nous connaissons les bases, nous allons demander aux navigateurs mobiles de "lire" notre site web comme s'il s'agissait d'une application. Il existe deux éléments méta principaux :

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

    Cela permettra d'ouvrir notre site Web en mode plein écran et de modifier la barre d'état par défaut.

  3. Nous en avons terminé avec les méta-éléments "comportementaux", 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 "loader" se comporte de la même manière sur tous les appareils (principalement les appareils Apple). 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)">

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

  4. Pour finir, nous aurons également besoin de quelques icônes pour notre application. Cette icône sera affichée dans le menu des appareils. Voici comment j'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">

    NOTE : Vous pouvez également utiliser "précomposé" pour que votre icône ne soit pas affichée avec l'éclat réfléchissant d'iOS. Il suffit d'ajouter ce mot là où vous définissez rel comme tel :

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

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

Répondu el 18 de Novembre, 2014 par Javier Viola (11 Points )

2voto

julianb avatar
julianb Points 21

J'ai essayé ce qui précède à partir de mon Samsung Galaxy S1

Cela n'a pas fonctionné pour moi... mais ce qui a fonctionné, c'est de créer d'abord un signet, puis d'ajouter ce signet comme raccourci à ma page d'accueil. Ce faisant, l'icône correcte a été utilisée.

Répondu el 20 de Octobre, 2011 par julianb (21 Points )

Questions en vedette

Top Tags

Dans notre réseau

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

Yandex
X