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.
La etiqueta meta viewport se usa para dar una serie de directrices a los navegadores para que rendericen adecuadamente una página web. Se introdujo Por Apple en su navegador Safari para los iPhones, actualmente todos los sistemas operativos para móviles la utilizan.
La meta viewport utiliza una serie de pares de claves=valores para definir diversos comportamientos del navegador a la hora de renderizar la web:
content="width=device-width, initial-scale=1, maximum-scale=1">
Veamos para qué sirve cada una:
width lógicamente para definir el ancho de la pantalla. Se puede definir un ancho fijo, pero en la práctica no tiene mucha utilidad. En cambio, al usar device-width , se adaptará directamente al ancho del dispositivo (100% del ancho).
Sobre heigth lo mismo, sólo que en este caso se define el alto.
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 cuál 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 permite es definir si queremos que el usuario pueda hacer zoom o no. Lo mejor es dejarlo en yes, ya que el usuario podría tratarse de alguien con problemas de visión que necesite ampliar la página para poder leerla. Con el maximum-scale y el minimum-scale lo mismo, piensa bien si vale la pena poner límites.