Skip to main content
HTML5

Meta etiquetas para convertir tu web en una app móvil

Por 10 diciembre, 2016Sin comentarios
Meta etiquetas para convertir tu web en una app móvil

Seamos seguidores o no de la marca de la manzanita, lo que podemos estar de acuerdo es que Apple ha contribuido mucho al avance de dispositivos móviles y ordenadores

. Pero seria injusto quedarnos ahí, ya que por ejemplo, también han contribuido en el mundo web, que es el que nos interesa. Especialmente en webs para móviles.
Desde el principio, los de Cupertino apostaron fuerte por HTML5 cuando el resto seguía confiando en tecnología Flash. Y también, aportaron su granito de arena con meta etiquetas html que mejoran la visibilidad de webs en móviles. La más conocida y más utilizada es la meta etiqueta «viewport». Pero esta merece mención aparte y por eso dedicaré un post solo a esta. Otra de las que hablaré es esta:

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

Con esta etiqueta conseguimos que nuestra web se vea en dispositivos móviles Apple con la apariencia de una app nativa. Al principio, estaba hecha solo para iPhones y iPads pero Google sacó la versión para el resto, con la aparición de Chrome en Android. Es practicamente la misma, quitando el prefijo «apple»:

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

Otra cosa que nos permite hacer Apple es crear un acceso directo en el escritorio del móvil de tu web y poder utilizar una imagen que queramos como icono, con la misma aparencia de una app. Apple recomienda unos tamaños de imagen determinados para que se vea correctamente. Por ejemplo, para pantallas normales, recomienda 57px x 57px. Para pantallas de alta densidad o más conocidas como «retina display», recomienda de 144×144. El código seria así:

<link rel="apple-touch-icon" sizes="57x57" href="ruta/icon57.png">
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="ruta/icon144.png">

También nos permite utilizar una imagen que aparezca en lugar de la pantalla en blanco cuando esta cargando una página:

<link rel=»apple-touch-startup-image» href=»ruta/imagencarga.jpg»>

Y por último, y menos utilizado. Podemos personalizar la barra del navegador. Concretamente el color: el que viene por defecto, negro o negro translúcido.

<meta name="apple-mobile-web-app-status-bar-style" content="default|black|black-translucent">

En próximos post hablaré del también conocido como «favicon», que és y para que sirve. Espero que os halla servido.

Jairo Calero

Jairo Calero

Desarrollador web frontend y backend, especialista en webs app desarrolladas en PHP y Javascript. Experto en HTML, CSS3, PHP y Javascript con frameworks y librerías como jQuery, Angular y Bootstrap. Gestor de herramientas SEO como Google Analytics, Search Console, SEMrush o Hotjar. Email marketing y Big data.

Deja tu respuesta