Viewport, una etiqueta imprescindible para el diseño responsive


Share on FacebookTweet about this on TwitterShare on LinkedInEmail this to someoneShare on Google+

Viewport es  la etiqueta que mejor representa la web en movilidad, ya que nos permite indicar cómo se verá un proyecto web en 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 bien sencillo, pues 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.

viewport2_

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 realizar 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.

viewport3

En este ejemplo tenemos el viewport de 320 píxeles, pero hemos definido un initial-scale de 1.5, por eso 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.

Te recomendamos consultar los diferentes artículos que hemos escrito sobre diseño responsive.


Share on FacebookTweet about this on TwitterShare on LinkedInEmail this to someoneShare on Google+
0 comentarios

Dejar un comentario

¿Quieres unirte a la conversación?
Siéntete libre de contribuir

Deja un comentario

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