Configuración de aplicaciones web Android

Question

Las aplicaciones web iPhone tienen cuatro configuration features disponibles (sin incluir la caché de aplicaciones HTML5) para configurar cómo se comportan las páginas web cuando guarda la página web en la pantalla de inicio como un marcador.

1. Puede especificar el icono de la página de inicio.
2. Puede especificar una imagen de inicio que se muestra mientras se carga la página web.
3. Puede ocultar la interfaz de usuario del navegador.
4. Puede cambiar el color de la barra de estado.

Las cuatro operaciones de trabajo mediante la adición de etiquetas a la cabeza > < así:

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

Naturalmente, ninguno de estos "Apple-" etiquetas específicas hacer nada en Android. Pero, ¿hay alguna forma de hacer algo equivalente? [Como mínimo, quiero que los usuarios puedan agregar mi página web a la pantalla de inicio de Android (por ejemplo, Android 2.0) y tener un bonito icono de alta resolución.]

Answer 1

Esta es una pregunta anticuada, como tal, la respuesta ha cambiado. Chrome en androides más nuevos tiene sus propias etiquetas meta para esto. Asegúrese de agregar a la pantalla de inicio y ejecute desde la pantalla de inicio. Un marcador normal no es suficiente. Actualmente, Chrome usa algunas de las directivas de Apple, pero las tres en la parte inferior son la magia de 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

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

<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 presente sin publicar una aplicación de Android que actúa como un contenedor para su sitio web.

Answer 3

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 Droid, y supongo que otros teléfonos 2. * OS, 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-precomposed tienen una ruta de URL COMPLETA.

Answer 4

probé la anterior de mi Samsung Galaxy S1

no funcionó para mí ... pero lo hizo el trabajo estaba creando primero un marcador y luego agregar ese marcador como un acceso directo a mi hogar. Hacer esto provocó que se utilizara el ícono correcto.

Answer 5

Hay diferentes elementos de metadatos que podemos utilizar para lograr los mejores resultados posibles:

1a) En primer lugar tenemos que configurar la ventana de nuestra aplicación como tal:
<meta name="viewport" content="width=device-width, initial-scale=1">

1b) 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. Hay dos elementos principales: los meta
<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 que se abrirá en la pantalla de modo completo y el estilo de la barra de estado por defecto.

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

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

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

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

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

NOTA: También puede utilizar "precompuesto" para el icono que no se muestra con brillo reflectante IOS. Sólo tiene que añadir esta palabra donde se define como rel 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 ha sido probado en dispositivos Android y funciona para.