Aunque ya sabéis que le tengo alergia a los iCacharros, y sobre todo a sus fanáticos seguidores, hay que reconocer que Apple de vez en cuando saca cosillas interesantes. Una de ellas es la meta etiqueta viewport de la que ya hablamos en el pasado, pero no es la única meta equita que se sacó de la manga Apple para el diseño web móvil. Y es que dando uso a sus etiquetas podemos hacer que una web aparezca en pantalla como si fuera un app nativa, que se le pueda hacer un acceso directo desde el menú de aplicacione con un icono… todo esto mediante una serie de etiquetas.

Para conseguir que al abrir la web esta se vea sin ningún marco del navegador en pantalla hay que usar la siguiente etiqueta en la cabecera de la web, gracias a la cual lograremos ese aspecto app-like:

<meta name="apple-mobile-web-app-capable" content="yes" />

Sigamos ¿cómo escogemos un icono? Bueno, realmente necesitamos dos iconos, uno para la versión normal y otro para la versión con pantalla de alta densidad (o como reza su nombre comercial «retina display«). El primero ha de ser de 57*57px y la siguiente de 114*114px, la propiedad href apuntará a donde tengáis guardada la imagen:

<link rel="apple-touch-icon" href="img/icons/icono5757.png">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="img/icons/icono114114.png">

Es posible que al abrir la web/app os salga durante unos segundos una imagen en blanco mientras esta carga (muy posible), algo que queda «feo» pero que tiene también solución: podéis definir una imagen que se muestre durante esta carga, una startup-image:

<link rel="apple-touch-startup-image" href="img/loading.png">

Y finalmente, existe una posibilidad de modificar mínimamente la barra de estado de Apple en la parte superior. No es que tengáis mucho con lo que jugar, no es que haya mucha opción, pero algo se puede ir apañando, pudiendo elegir entre el color por defecto, el negro o un efecto traslúcido.

<!--Por defecto-->
<meta name="apple-mobile-web-app-status-bar-style" content="default">
<!--negro-->
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<!--traslúcido-->
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">

Y con estas opciones podréis hacer que vuestra web parezca un app para dispositivos Apple. La he probado en el curro (web PHP+Javascript) en un proyecto y el resultado fue satisfactorio. La pena es que no haya algo así para Windows Phone y Android.