etiqueta viewport y sus consecuencias

¿Qué es y para qué sirve?, Esta pregunta siempre me la hacía cada vez que echaba un vistazo a las etiquetas incluidas en, pero es como todo, no le das importancia hasta que realmente es necesario. viewport identifica el tamaño deseado de la pantalla y dice al dispositivo a que tamaño debe renderizar la página. Es imprescindible cuando tenemos un diseño responsive y en ella dependiendo de los parámetros podemos habilitar/inhabilitar el zoom, definir el tamaño de pantalla así como el zoom predeterminado. Curiosamente desarrollando una pequeña aplicación nativa para iPad en la que el tamaño del viewport era de 320px por 480px no renderizaba a esa medida. No podía cambiar el tamaño porque el web view (www) se que quedaba fijo y se perdía la plantilla responsive, por lo tanto para que funcionase tuve que remover width=device-width como parámetro o pasar width=100% cosa que no tiene mucho sentido.

En resumen, si estáis desarrollando una aplicación nativa que “embeba” una aplicación web responsive, hay que revisar los parámetros de la <meta> etiqueta viewport.

Empieza por entender como funciona..

<meta name=”viewport” content=”width=device-width, initial-scale=1.0″/>

Para más información siempre estarán nuestros “compañeros” de W3C.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *