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