PERSONALIZA TU WEB PARA DISPOSITIVOS APPLE (PARTE lI)

     
       En la primera parte (PERSONALIZA TU WEB PARA DISPOSITIVOS APPLE (PARTE I)) vimos como poner un icono de nuestra web en la pantalla de inicio de un dispositivo Apple y como detectar si se entraba a la web con un safari móvil, para poder recomendar al usuario que nos añada a su pantalla de inicio. Y nos quedamos con una duda, y es ¿qué es el modo de aplicación o standalone?

       Es una manera de usar el Safari, sin que parezca que estamos en Safari, como navegar a página completa. Sin la barra de navegación. De esta forma ganamos espacio en la pantalla (en un dispositivo móvil siempre es bueno). La parte mala es que si pulsamos un enlace, la nueva página se abre en Safari normalmente, con barras de navegación, etc. Así que el modo aplicación solo deberíamos activarlo si la página supone una aplicación completa, por ejemplo, es un juego, una publicación o tiene sentido como aplicación, aunque sea web y se cargue cada vez que entremos.

       Para activar el modo de aplicación en nuestra página debemos usar la siguiente cabecera:
      <meta name="apple-mobile-web-app-capable" content="yes" />
       También podemos personalizar la barra de estado, que es la única que persiste en el modo aplicación:
      <meta name="apple-mobile-web-app-capable" content="yes" />
       Con esta línea habríamos hecho la barra negra traslúcida. Nos deja dar un aspecto más completo a nuestra aplicación web, poniendo un color parecido, aunque no podemos poner un color libremente, sino elegir entre los que ofrece apple (en la documentación vienen las opciones y también otras cabeceras que pueden resultar interesantes).

       Si cargamos una web en modo aplicación veremos que primero muestra una pantalla con una captura de cómo dejamos la web la última vez mientras carga la versión actual. Si somos muy exigentes con nuestra imagen podemos cambiar esta pantalla para que sea una imagen creada por nosotros. Es similar a lo que hicimos con los iconos, necesitamos 3 imágenes:
  • Una de 320x460 píxeles para dispositivos de pantalla pequeña.
  • Otra de 748x1024 para iPads e iPhones en modo panorámico (por lo que la imagen debe estar girada)
  • La última de 768x1004 para iPads e iPhones en modo vertical.
Y las cabeceras a añadir para que funcionen estas imágenes como vista previa son:
        <link rel="apple-touch-startup-image"
              href="imagenes/ios-startup-748x1024.jpg"
              media="screen and (min-device-width: 768px) and (orientation:landscape)" />
        <link rel="apple-touch-startup-image"
              href="imagenes/ios-startup-768x1004.jpg"
              media="screen and (min-device-width: 768px) and (orientation:portrait)" />
        <link rel="apple-touch-startup-image"
              href="imagenes/ios-startup-320x460.jpg"
              media="screen and (max-device-width:320px)"/>
       El selector media con las nuevas propiedades de css3 da mucho más juego que el visto aquí, pero se sale del ámbito de esta entrada.