La Etiqueta Meta Viewport En La Web Móvil

La etiqueta meta para el viewport fue introducida por Apple en Safari para móviles, para ayudar a los desarrolladores a mejorar la presentación de sus aplicaciones web en un iPhone, iPod Touch o iPad. A continuación una breve explicación y un video muy descriptivo.

La etiqueta viewport nos permite a los que construimos sitios web o web apps, definir el ancho, alto y escala del área usada por el navegador para mostrar contenido.

Al fijar el ancho o alto del viewport, los desarrolladores podemos usar un número fijo de pixeles (ej: 320, 480, etc) o usar dos constantes, device-width y device height respectivamente.Se considera una buena práctica configurar el viewport con algunas de estas dos constantes, en vez de un ancho o alto fijo. Muchos desarrolladores caen en el error de configurar el viewport con un width de 320, siendo este el ancho del iPhone. Utilizando las constantes, se verá de mejor forma no solo en el iPhone sino que en muchos “mobile browsers”más. A continuación la configuración más común de una etiqueta meta, para introducir dentro del head de tu mobile web app:

1	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

Más abajo les dejo un video corto pero muy explicativo de la meta tag para definir el viewport. El que habla en el video es Maximiliano Firtman, autor (entre muchas cosas) de varios libros relacionados al desarrollo web, entre ellos recomiendo el libro Programming the Mobile Web, donde se puede leer mucho más de la mobile weby web apps, muy bueno. También les sugiero que lo sigan en Twitter en @firt).

Dentro de esta temática, Maximiliano creó el sitio Mobile HTML5, que ayuda a entender la compatibilidad de HTML5 en navegadores mobile y tablets.