Join FlipAndroid.COM Telegram Group: https://t.me/joinchat/F_aqThGkhwcLzmI49vKAiw


Configuración de aplicaciones web Android

Las aplicaciones web del iPhone tienen cuatro características de configuración disponibles (sin incluir la caché de aplicaciones HTML5) para configurar el comportamiento de las páginas web al guardar 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 muestre 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 funciones funcionan agregando etiquetas al <head> de esta manera:

  • Error del navegador de Android? Div overflow scrolling
  • Android- PhoneGap / WebView ignora las metaetiquetas de la ventana de visualización?
  • CSS en línea para hr no se aplica mientras se convierte html a pdf utilizando la biblioteca iText
  • Android - Webview, cuadros de entrada dobló?
  • ¿Puedo hacer una llamada telefónica desde HTML en Android?
  • ¿Existe un método para desactivar la función Auto-resize de la aplicación de Gmail en el diseño de un correo electrónico?
  • <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, ninguna de estas etiquetas específicas de "apple" hace nada en Android. ¿Pero hay alguna manera de hacer algo equivalente? [Como mínimo, quiero que los usuarios puedan agregar mi página web a su pantalla principal de Android (por ejemplo, en Android 2.0) y tener un icono de alta resolución.]

  • ¿Cómo obtener contenido html de XWalkView?
  • Columnas espaciadas que se contraen en el navegador web de Android (cuando se usan páginas de ajuste automático)
  • Cómo calcular la relación de píxeles del dispositivo
  • Entrada de archivo HTML en android webview (android 4.4, kitkat)
  • Abrir aplicación de Android desde una página web
  • Meta Tag "apple-mobile-web-app-able" para Android?
  • 5 Solutions collect form web for “Configuración de aplicaciones web Android”

    Esta es una pregunta fechada, ya que la respuesta ha cambiado. Chrome en los androides más nuevos tiene sus propias etiquetas meta para esto. Asegúrese de añadir a la pantalla de inicio y de inicio desde la pantalla de inicio. Un marcador normal no es suficiente. Chrome utiliza actualmente 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"> 

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

     <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 contenedor 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 Droid, y presumo otros teléfonos 2. * OS, al agregar un marcador a la pantalla de inicio, la pantalla de inicio sólo muestra un icono personalizado si el vínculo rel = "apple-touch-icon" o apple-touch -icon-precomposed tiene un camino de URL completo.

    He intentado lo anterior desde mi Samsung Galaxy S1

    No funcionó para mí … pero lo que hizo el trabajo fue la creación de un marcador y, a continuación, añadir ese marcador como un acceso directo a mi casa. Hacer esto provocó que se usara el icono correcto.

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

    1a) En primer lugar, debemos configurar la ventana gráfica para nuestra aplicación de la siguiente manera:
    <meta name="viewport" content="width=device-width, initial-scale=1">

    1b) Hay un pequeño hack aquí, para dispositivos con pantallas más altas (iPhone 5 por ejemplo):
    <meta name="viewport" content="initial-scale=1.0">
    Sólo póngalo debajo de la otra 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 meta-elementos 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 el estilo de la barra de estado predeterminada.

    3) Hemos terminado con el "comportamiento" meta elementos, ahora vamos a empezar 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 de la misma manera en todos los dispositivos (principalmente los dispositivos de Apple). He aquí cómo 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 todos los tamaños deben ser respetados, de lo contrario no funcionará.

    4) Para terminar, también necesitaremos algunos iconos para nuestra aplicación. Este icono se mostrará en el menú de dispositivos. He aquí cómo 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 que su icono no se muestre con brillo reflexivo iOS. Simplemente añada esta palabra donde defina rel como así:
    <link rel="apple-touch-icon-precomposed" href="../images/mobile-icon-57.png">

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

    FlipAndroid es un fan de Google para Android, Todo sobre Android Phones, Android Wear, Android Dev y Aplicaciones para Android Aplicaciones.