En el mundo de la web móvil la etiqueta meta viewport se ha convertido en un elemento esencial, básico en los últimos tiempos. Inicialmente introducida por Apple en su navegador Safari para iPhone, rápidamente fue adoptada por otros navegadores hasta hacerse habitual en todos los OS móviles. Esta etiqueta busca dar una serie de directrices a los navegadores para que rendericen adecuadamente la web.

Hay que ponerse un poco en situación: cuando aparecieron los primeros smartphones no había webs adaptadas para dispositivos móviles, y pasó tiempo hasta que las hubo (a día de hoy todavía hay muchas páginas que no se visualizan correctamente). ¿Solución? Que el teléfono «emule» una pantalla más grande y la web original se redimensione a ese tamaño. La idea es buena ¿El problema? Bueno, que era una solución temporal para aquel momento, pero que en la actualidad se queda coja. Este sistema que nos muestra una pantalla reducida hace que si hemos hecho una maquetación responsiva con media queries la cosa no acabe de funcionar. Para eso está meta viewport, para establecer el ancho, el alto o el zoom de la página.

La meta viewport utiliza una serie de pares de claves=valores para definir diversos comportamientos del navegador a la hora de renderizar la web:

<meta name="viewport" content="
	width = [tamaño en pixels | device-width ],
	height = [tamaño en pixels | device-height],
	initial-scale = float mayor que 0.1,
	minimum-scale = float mayor que 0.1,
	maximum-scale = float mayor que 0.1,
	user-scalable = [yes | no]
">

<!--Un ejemplillo real tras la teoría-->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

Muy bien ¿y para qué vale cada una?:

Bueno, width lógicamente para definir el ancho de la pantalla. Podéis definir un ancho fijo, lo cual en términos generales viene a ser un epic fail. En cambio si usáis device-width esta ya se adaptará directamente al dispositivo.

Sobre heigth lo mismo, sólo que en este caso se define el alto. En la práctica no se me ocurre quién querría definir un alto estático, pero existir existe.

Para regular qué zoom tendrá por defecto la página está initial-scale, a la cual le tienes que dar un valor a partir de 0.1, siendo el valor 1 el equivalente a no tener zoom (es decir, menos de uno reduce y más de 1 amplía).

La pareja maximum-scale y minimum-scale nos permiten definir cual será el zoom máximo y el mínimo que pueda aplicar el usuario. Como arriba, 1 es igual a que se vea tal cual, sin zoom.

Finalmente user-scalable lo que nos permite es definir si queremos que el usario pueda hacer zoom o no. Lo mejor es dejarlo en yes, ya que no es buena idea poner limitaciones al user, y mucho menos en el caso del zoom, ya que podría tratarse de alguien con problemas de visión que necesite ampliar la página para poder leerla. Con el maximum y el minimum scale tres cuartos de lo mismo, piensa bien qué hace si vas a poner límites.

En fin, con esto ya tienes otro paso para mejorar tus diseños web adaptados a dispositivos móviles.