Configuración de Aplicaciones Web Android

Cuando creas un acceso directo en la pantalla de inicio a un marcador, Android usará un apple-touch-icon-precomposed si está presente (pero no apple-touch-icon) como icono de alta resolución:

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

En cuanto al resto de las características, no creo que haya ninguna manera de hacer esto en la actualidad sin publicar una aplicación para Android que actúa como un envoltorio para su sitio web.

Esto puede ser de interés para los lectores:

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

En 2.1-update1, en el Droide, y supongo que otros 2.* Los teléfonos con sistema operativo, al agregar un marcador a la pantalla de inicio, la pantalla de inicio solo muestra un icono personalizado si el enlace rel="apple-touch-icon" o apple-touch-icon-precompuesto tienen una ruta de url COMPLETA.

Probé lo anterior desde mi Samsung Galaxy S1

No funcionó para mí... pero lo que funcionó primero fue crear un marcador y luego agregar ese marcador como un acceso directo a mi casa. Hacer esto causó que se usara el icono correcto.

Existen diferentes meta elementos que podemos utilizar para lograr los mejores resultados posibles:

1. En primer lugar tenemos que configurar la ventana de visualización de nuestra aplicación de la siguiente manera:

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

   Hay un pequeño truco aquí, para dispositivos con pantallas más altas (iPhone 5 por ejemplo):

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

   Solo ponlo debajo del otro meta y hará toda la magia.

2. Ahora que tenemos lo básico, le diremos a los navegadores móviles que "lean" nuestro sitio web como si fuera una aplicación. Alli son dos elementos meta principales:

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

   Esto hará que nuestro sitio web se abra en modo de pantalla completa y con estilo la barra de estado predeterminada.

3. Hemos terminado con los meta elementos "comportándose", ahora comencemos con nuestros iconos. La cantidad de iconos y líneas de código dependerá totalmente de usted. Para la imagen de inicio preferí crear un icono para cada resolución, de modo que mi "cargador" actúe de la misma manera en todos los dispositivos (principalmente dispositivos Apple). Así es como lo hice:

   <!--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)">
   

   NOTA: El el formato debe ser PNG y todos los tamaños deben respetarse, de lo contrario no funcionará.

4. Para terminar, también necesitaremos algunos iconos para nuestra aplicación. Este icono se mostrará en el menú dispositivos. Así es como lo hice:

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

   NOTA: También puedes usar "precompuesto" para que tu icono no se muestre con brillo reflectante de iOS. Simplemente agregue esta palabra donde define rel como así:

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

Como se ha dicho, esto funciona mejor en los dispositivos de Apple. Pero el icono de la aplicación se ha demostrado en dispositivos Android y funciona.