Configuración metaetiqueta viewport, web responsive

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.

Contenidos del artículo

Configuración metaetiqueta viewport

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.

La etiqueta viewport se define en el elemento <head> del documento HTML y puede contener diferentes atributos para ajustar el comportamiento de la página en dispositivos móviles.

<meta name="viewport" content="...">

Las propiedades más comunes utilizadas en «content» de la metaetiqueta viewport son:

«width«: Especifica el ancho inicial del viewport. Por ejemplo, «width=device-width» establece el ancho inicial del viewport para que coincida con el ancho del dispositivo.
«initial-scale«: Define el nivel de escala inicial del viewport. Por ejemplo, «initial-scale=1.0» establece que la página se mostrará inicialmente sin ninguna escala.
«minimum-scale» y «maximum-scale»: Estos atributos permiten establecer los límites mínimos y máximos de escala del viewport, controlando si el usuario puede hacer zoom en la página.
«user-scalable«: Este atributo permite habilitar o deshabilitar la capacidad del usuario para hacer zoom en la página. Si se establece en «yes», el usuario podrá hacer zoom; si se establece en «no», se deshabilitará el zoom.
Height: altura virtual de la pantalla o altura del viewport.

Un ejemplo de cómo se vería la metaetiqueta «viewport» en el código HTML es el siguiente:

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Mi página web</title>
</head>
<body>
  <!-- Contenido de la página -->
</body>
</html>

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. Ejemplo:

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

También podemos hacerlo 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="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.

Ejercicio propuesto

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.