Con todo el auge del diseño web responsive (aún no se cuál sería la correcta traducción al español), aún no he encontrado una guía completa sobre ella en español, así que voy a intentarlo:

Comparativa entre no usar la etiqueta viewport y hacerlo
Sin (izquierda) y con (derecha) la etiqueta viewport.

Ejemplo

Éste es un pequeño ejemplo del uso más frecuente que se le puede dar a la etiqueta:

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

Función

La etiqueta meta viewport es una etiqueta que se está moviendo a CSS (aunque hasta que haya mejor soporte no deberías de dejar de usar la etiqueta, deberías de echar un vistazo a la directiva @viewport).

Básicamente, indica cómo debería de comportarse el navegador móvil a la hora de mostrar en pantalla la página web.

Por defecto los navegadores móviles muestran con un ancho determinado la página (en el caso del iPhone, 980px, por ejemplo). Por lo tanto la página no sólo se mostrará reducida, sino que además no se aplicarán nunca nuestras @media queries que afecten a dispositivos móviles. A efectos prácticos el iPhone mostraría una web de 980px.

Sin embargo, con ésta etiqueta, podemos establecer el ancho, el alto, el zoom de la página….

Referencia

La meta viewport consiste en una lista de claves=valores separadas por comas. Aquí estaría un ejemplo con todas las opciones disponibles:

Nota: float, es un número con o sin decimales, pixels, es un número entero puesto sin unidades, el resto son palabras literales

<meta name="viewport" content="
	width = [pixels | device-width ],
	height = [pixels | device-height],
	initial-scale = float,
	minimum-scale = float,
	maximum-scale = float,
	user-scalable = [yes | no]
">

Ahora iremos una por una. Todos los ejemplos se basan en el siguiente código (variando el content) de la etiqueta viewport:

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="">

	<title>Viewport</title>

	<style>
		body {
			margin: 0;
		}
		p {
			width: 300px;
			padding: 15px;
			background: red;
		}
	</style>
</head>
<body>
	<p>Hola a todo el mundo! [...]</p>
</body>
</html>

width

width indica el ancho que tomará la página en el dispositivo.

Lo ideal suele ser usar la palabra clave device-width (que representa el ancho del dispositivo), pero para páginas con contenido de un ancho fijo (no fluido), es posible usar un valor estático en píxels (leer más abajo).

Para el ejemplo he puesto uno como width=device-width:

Uso de width=device-width
Uso de width=device-width

Y para el caso (como es) de un diseño estático (300px + 30 de los paddings), he hecho otro ejemplo con width=330, que queda escalado adecuadamente para que la página entre exactamente en el viewport:

Uso de width=300
Uso de width=300

height

height indica el alto (¿a que no lo habríais adivinado?). Sinceramente, aún no he visto caso útil para él, aunque sigue las mismas directrices que width (device-height o valor en píxels).

initial-scale

¿Con un dispositivo móvil puedes hacer zoom en cualquier lado de la página, verdad? Pues con esto se regula a qué zoom estará inicialmente la página. Es recomendable ponerlo en principio como initial-scale=1, ya que Opera Mini suele hacer zoom de más al principio si no se especifica.

Para poner un ejemplo algo diferente, he creado un ejemplo con initial-scale=0.75, que mostrará la página a un 75% de su ancho original:

initial-scale puesto como 0.75
initial-scale puesto como 0.75

maximum/minimum-scale

maximum-scale, sirve para establecer el zoom máximo de la página, y minimum-scale para el mínimo (sorprendente, ¿eh? ;)).

Lo más frecuente es establecer maximum-scale=1 para evitar que el usuario haga zoom hacia atrás de la página.

El uso de minimum-scale lo discutiremos más abajo.

user-scalable

user-scalable te permite controlar si el usuario puede hacer zoom en la página (por defecto es yes). El porqué no ponerlo como no más abajo.

Otras

Existen otros valores como target-densitydpi (propietaria de Android) que no suele ser utilizado (es más recomendable hacer media queries según la resolución).

Malas prácticas

En mi opinión hay dos muy malas prácticas a la hora de usar la etiqueta meta viewport:

  1. user-scalable=no: No dejar al usuario moverse con la página con libertad haciendo zoom puede no ser un problema para la mayoría de los usuarios, pero definitivamente puede convertirse en un gran problema para gente con problemas de visión. Además, es incómodo no poder hacer zoom en una página cuando te apetece.
  2. minimum-scale: Lo mismo de antes, limitar el zoom al usuario para mí es un craso error en accesibilidad

El futuro de la etiqueta viewport: @viewport {}

El futuro de la etiqueta viewport no está en una etiqueta viewport, está en tu hoja de estilos. Opera e Internet Explorer ya han hecho la primera implementación de @viewport. Si te interesa, ya se ha hablado de ello aquí.

11 pensamientos en “Cómo usar la meta viewport

  1. Bitacoras.com
  2. Imagen de Juvinao el dijo:

    Emilio tengo un pequeño problema con la plantilla de mi blog, quiero cambiarle la fuente solo a las entradas y ponerle el tamaño de la letra mas pequeña, pero no he podido hacer ni lo uno ni lo otro, tal vez tu me puedas ayudar.

    Gracias de antemano ;)

  3. Imagen de George DoeGeorge Doe el dijo:

    Si se tiene un sitio responsive, al hacer zoom el dispositivo puede tomar otro breakpoint como pasaría al hacer zoom en una computadora de escritorio?

    • Imagen de Emilio Cobos Álvarez el dijo:

      No, pero sí se pueden descuadrar elementos, al igual que pasa en escritorio. La solución es usar ems en las media queries, en vez de píxels, o en su defecto puedes limitar el zoom a uno en la meta viewport, aunque no es muy recomendable desde el punto de vista de la accesibilidad.

  4. Imagen de Victor BeltranVictor Beltran el dijo:

    Hola gracias por esta excelente eplicacion, solo una duda ¿Entonces para que tanto rollo para las medias queries? Si los dispositivos no las muestran, apenas estoy aprendiendo a maquetar, incluso cuando comence hacer mis primeros “responsive web” le decia a mis amigos, mira como cambia y ajustaba la pantalla pero ahorita me voy enterando que no afectan a los dispositivos moviles, bueno supongo que en su mayoria, los mas modernooos, ¿para que usarlas?

Add Comment Register



Deja un comentario

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

Puedes usar las siguientes etiquetas y atributos HTML:<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre data-language=""> <ul> <ol> <li>
Para poner código usa <pre data-language="[lenguaje]"><code>[código]</code></pre>, y no olvides escapar el HTMl.