iPhone aplicaciones web tienen cuatro características de configuración disponible (no incluyendo la caché de aplicación HTML5) para configurar la forma en que las páginas web se comportan cuando se guarda la página web a la pantalla de inicio como un marcador.

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

Las cuatro características de trabajo mediante la adición de etiquetas a la <head> como esta:

<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 de hacer cualquier cosa en Android. Pero, ¿hay alguna forma de hacer algo equivalente? [Como mínimo, quiero que los usuarios puedan agregar a mi página web para su pantalla de inicio de Android (por ejemplo, en Android 2.0) y tener una linda hi-res icono.]

InformationsquelleAutor Dan Fabulich | 2009-12-23

5 Comentarios

  1. 27

    Esta es una fecha de la pregunta, como tal, la respuesta ha cambiado.
    Chrome en los nuevos androides tiene su propia meta tags para este.
    Asegúrese de Añadir a la Pantalla de inicio, y se inicia desde la pantalla de inicio.
    Normal marcador no es suficiente. Chrome utiliza en la actualidad algunos de los de apple directivas, pero los tres en la parte inferior son los android magia.

    <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">
  2. 45

    Cuando se crea un acceso directo en la pantalla de inicio para un marcador, Android va a utilizar un apple-touch-icon-precomposed si está presente (pero no apple-touch-icon) como una de alta-res icono:

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

    Como para el resto de las características, no creo que haya alguna manera de hacer esto hoy en día sin la publicación de una aplicación para Android que actúa como un contenedor para su sitio web.

    • Esto no parece funcionar en HTC Evo; es probable que no funcione en cualquier interfaz de usuario HTC Sense dispositivo.
    • Debería funcionar si se deshabilita el HTC Sense launcher y uso el Launcher AOSP en su lugar. (HTC Sense dispositivos realmente se suministra con ambos lanzadores instalados.) En cualquier caso, gracias por los comentarios. Es bueno saber eso. He presentado un error a revisar esto como un candidato para su inclusión en futuras versiones de Android CDD. (b/2811198)
    • He intentado esto con mi Nexus7 – pero no hubo suerte. Mostrar un aspecto feo icono del marcador con el camino demasiado pequeño favicon en el medio … 🙁
    • Esto le dará un icono pero no iniciar la aplicación en modo autónomo, sin la interfaz de usuario del explorador, ver mi respuesta para una manera de hacer eso.
  3. 22

    Esto puede ser de interés para los lectores:

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

    2.1-update1, en el Droid, y supongo que de otros 2.* OS teléfonos, cuando la adición de un favorito a la pantalla de inicio, la pantalla sólo muestra un icono personalizado si el enlace o » apple-touch-icon-ya tiene una dirección url COMPLETA.

    • Confirmado y trabajando en x10 2.1. 🙂
    • Que tamaño de icono (para mi web favoritos de la aplicación) necesito para Android ? Tal vez para Apple: 320×460, 640×920, 640×1096, 72×72, 114×114, 144×144, 768×1004, 1024×748
    • De acuerdo developer.chrome.com/multidevice/android/installtohomescreen los tamaños para Android 36×36, 48×48, 72×72, 96×96, 144×144, 192×192, tal vez demasiado 128×128
  4. 2

    He probado el de arriba de mi Samsung Galaxy S1

    No funciona para mí… pero lo que sí funcionó fue la primera creación de un marcador y, a continuación, agregar el marcador como un acceso directo a mi casa. Haciendo esto provocó que el icono correcto para ser utilizado.

  5. 1

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

    1. Primera de todo lo que necesitamos para establecer la ventanilla para nuestra aplicación así como:

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

      Hay un pequeño hack aquí, para los dispositivos con el más alto de pantallas del iPhone 5, por ejemplo):

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

      Sólo se pone debajo de la otra meta y que va a hacer toda la magia.

    2. Ahora que conocemos los conceptos básicos, vamos a decirle a los móviles de los navegadores para que «lea» de nuestro sitio web como si fuera una aplicación. Hay dos principales elementos 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 se abre en pantalla completa el modo y el estilo predeterminado en la barra de estado.

    3. Que se hacen con la de «comportarse» elementos meta, ahora vamos a empezar con nuestros iconos. La cantidad de iconos y líneas de código dependerá totalmente de usted. Para el inicio de la imagen preferí crear un icono para cada resolución, por lo que mi «loader» actúa de la misma en todos los dispositivos (principalmente los dispositivos de Apple).
      He aquí cómo 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 formato debe ser PNG y de todos los tamaños deben ser respetados, de lo contrario no funcionará.

    4. Para finalizar, también se necesitan de 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-->
      <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 puede utilizar el «ya» para el icono no se muestra con iOS reflexivo brillo. Sólo tiene que añadir esta palabra, donde se definen rel así como:

      <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 ha sido probado en dispositivos Android y funciona a.

    • Que tamaño de icono (para mi web favoritos de la aplicación) necesito para Apple ? 320×460, 640×920, 640×1096, 72×72, 114×114, 144×144, 768×1004, 1024×748 ? Y para Android ?
    • Para Apple sizes="57x57" sizes="114x114" sizes="72x72" sizes="144x144" sizes="60x60" sizes="120x120" sizes="76x76" sizes="152x152" de acuerdo css-tricks.com/favicon-quiz
    • De acuerdo developer.apple.com/library/safari/documentation/UserExperience/… los tamaños de Apple (Web icono de clip ) son 76×76, 120×120, 152×152, 167×167, 180×180

Dejar respuesta

Please enter your comment!
Please enter your name here