~ read.

Convierte tu web en una aplicación móvil

Muchas veces queremos visionar una web desde un móvil y tablet y, aunque ésta sea responsive design no queda del todo integrada como tal en el dispositivo.

Apple pone a disposición de los desarrolladores una serie de tag en HTML con los que se puede alcanzar mejor integración con el dispositivo (Definir el icono para añadir un acceso directo, imagen que queremos que se muestre cuando abramos la "aplicación", esconder la barra de navegación....) que nos ayuda a conseguir que nuestra versión móvil parezca una aplicación nativa.

Las etiquetas HTML que hay que definir son:

  • view-port, para ajustar la escala en la que vemos la web en el dispositivo.
  • apple-mobile-web-app-capable, para esconder la barra de navegación en nuestra "aplicación web", es decir, para ejecutar la aplicación en modo pantalla completa.
  • apple-mobile-web-app-status-bar-style, que sólo se tiene que definir si se ha definido apple-mobile-web-app-capable.
  • apple-touch-icon-precomposed, para definir el icono para el acceso directo
  • apple-touch-startup-image, para definir la imagen a cargar al principio al abrir una aplicación (Puede especificarse en algunos casos tanto la imagen con el dispositivo en vertical como en horizontal.

Y aquí el código con todas las etiquetas para cada dispositivo:

[gist]https://gist.github.com/Kikobeats/6192715[/gist]