Viewport es la etiqueta que mejor representa la web en movilidad, ya que nos permite indicar cómo se verá un proyecto web en los dispositivos móviles. Apple la creó para decirle al iPhone como debería renderizar el documento, convirtiéndose desde entonces en un estándar que ya está soportado por la mayoría de dispositivos.
Como definición rápida, diremos que viewport podría traducirse como vista o ventana y nos sirve para definir qué área de pantalla está disponible al renderizar un documento, nivel de escalado y el zoom que debe mostrar inicialmente. Todo ello, con parámetros que le damos a la propia etiqueta META.
Entender Viewport
Se trata de un concepto bastante sencillo, ya que corresponde con el área que está disponible en la pantalla del navegador, o lo que es lo mismo, el viewport es el área útil donde se mostrará la página web. Cuando accedemos a una página optimizada para ordenadores de escritorio y que no tiene definida ninguna etiqueta viewport, las páginas suelen mostrar contenidos reducidos para conseguir que se ajusten al espacio de la ventana del navegador.
Bien, pues el viewport está realizando una emulación en pixels para que se muestre la pantalla completa en un área inferior al ancho que tiene el dispositivo, algo que resulta totalmente necesario si queremos que nuestra página se vea correctamente en dispositivos de movilidad.
En una imagen de 320 pixels de ancho, si queremos que esta ocupe todo el ancho del dispositivo, deberíamos configurar un viewport a 320 pixels, porque si lo configuramos con un viewport de 980 píxeles, la imagen quedaría muy pequeña.
Configurar la etiqueta Viewport
Cuando el navegador renderiza un documento web, hace un escalado de los contenidos para que las páginas que están diseñadas para escritorio se vean de forma aceptable en un dispositivo móvil. En la mayoría de los casos, tendremos que hacer zoom para poder leerlos. Sin embargo, podemos configurar el viewport para indicar qué debe hacer.
Para ello, disponemos de los siguientes parámetros en la etiqueta META:
- Width: anchura virtual (emulada) de la pantalla o anchura del viewport.
- Height: altura virtual de la pantalla o anchura del viewport.
- Initial-scale: la escala inicial del documento.
- Minimum-scale: la escala mínima que se puede poner en el documento.
- Maximum-scale: la escala máxima configurable en el documento.
- User-scalable: si se permite o no al usuario hacer zoom.
Podrás comprobar que también podemos indicar el nivel de zoom que tiene inicialmente y hasta dónde podemos llegar.
En este ejemplo, tenemos el viewport de 320 píxeles, pero hemos definido un initial-scale de 1.5 y es por eso que la imagen no cabe en pantalla.
Observa este ejemplo de uso de viewport:
<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1">
La anchura y la altura de viewport se refieren a las dimensiones fijas del viewport inicial. Lo habitual es definir únicamente la anchura con el valor device-width, medida que hace referencia a la anchura de la pantalla del dispositivo.
Con initial-scale=1 le indicamos que no se haga zoom sobre el documento cuando entremos en él.
Con user-scalable=no, el usuario no podrá pellizcar en la imagen para hacer zoom. Esto nos podrá facilitar tener siempre la escala a como nosotros hayamos definido en la etiqueta META viewport, lo que puede simplificarnos la vida a la hora de definir cómo se debe ver una web.