Configuración metaetiqueta viewport, web responsive

Configuración metaetiqueta viewport

La declaración viewport nos permite definir los parámetros de visualización de un página web en los diferentes dispositivos. Consiste en una metaetiqueta mediante la que se establece si se puede hacer zoom en una página, el zoom inicial o la anchura de la pantalla del dispositivo.

Cuando trabajamos con una web responsive es necesario definir un viewport adecuado, de lo contrario es muy probable que la página no lea correctamente los media queries y que se vea en formato muy reducido, siendo necesario hacer zoom para ver el contenido.

Disponemos de los siguientes parámetros en la metaetiqueta viewport.

• Width: anchura virtual (emulada) de la pantalla o anchura del viewport.
• Height: altura virtual de la pantalla o altura del viewport.
• Initial-scale: la escala inicial del documento.
• Minimum-scale: la escala mínima que se puede establecer en el documento.
• Maximum-scale: la escala máxima configurable en el documento.
• User-scalable: si se permite al usuario hacer zoom.

Ejemplo de la etiqueta viewport que no permite escalar la página

Lo más habitual es definir la anchura con el valor «device-width», que es una medida que hace referencia a la anchura de la pantalla del dispositivo, y no con una medida fija. Por lo tanto, con width=device-width conseguimos que el viewport sea igual a la anchura real de la pantalla del dispositivo, de modo que no se tratará de emular una pantalla mayor de lo que realmente es y veremos los píxeles reales.

Con initial-scale=1 conseguimos definir la escala inicial del documento para evitar transformaciones.

Con user-scalable=no o con maximum-scale con un valor igual al de initial-scale conseguimos que el usuario no pueda hacer zoom en la página, con lo que siempre se mantendrán las medidas que nosotros hemos definido al construir la web.

Ejemplo:

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

<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1">

Ejemplo etiqueta viewport que permite escalar la página

Para no limitar al usuario el uso del zoom en nuestra página web y darle la posibilidad de agrandar y empequeñecer cualquier parte que necesite ver mejor lo ideal es no definir ni el maximum-scale ni el user-scalable=no.

Ejemplo:

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

Por lo tanto, es interesante que el usuario pueda hacer zoom en la página web (en un smartphone será con los dedos sobre la pantalla táctil). En este caso, el usuario no está cambiando los valores de viewport, sino la escala con la que se visualiza el documento.

Ejercicios propuestos

Actividad 3

Define la etiqueta viewport en tu proyecto. Define el ancho igual al ancho del dispositivo y el resto de valores defínelos en base a tus propios criterios.