La etiqueta meta viewport en HTML
Los navegadores de dispositivos portables con pantallas sensiblemente mas pequeñas que las de los monitores de sobremesa intentan, en primer lugar, que los sitios no diseñados específicamente para dichos dispositivos. Para ello, despliegan la página como si la pantalla fuera mas grande de lo que en realidad es, quedando partes de la página fuera de la pantalla real. A esa superficie virtual mayor que la pantalla real es a lo que se llama, en este contexto, viewport.
La etiqueta que nos ocupa permite indicar al navegador cómo debe definir el viewport para la página.
Puede verse una exposición en inglés aquí.
1. Sintaxis
La etiqueta es tal que
<meta name="viewport" content="width=xxx initial-scale=xxx user-scalable=xxx"/>
La definición original para Safari puede verse aquí
2. Cómo funciona.
Por las pruebas realizadas con Chrome y Firefox, lo primero que hay que saber es que mejor la pones, pq si no ambos hacen cosas raras.
Despues, la cosa va así (tratamos aquí el asunto de la width, que es lo que normalmente interesa; supongo que la height irá igual):
2.1. width
La width que se le indica es la del viewport. Para que haga el tenga el mismo tamaño que la pantalla física, se utiliza el valor simbólico 'device-wdith'.
Por las pruebas realizadas, cuando width es menor que el ancho de la pantalla física, no tiene efecto ni en chrome ni en firefox.
2.2. Escala: initial-scale
Lógicamente, la escala es la relación entre el viewport y el tamaño físico de la pantalla: establece qué parte del viewport es visible, en el caso de que sea mayor, por supuesto. Es importante tener en cuenta que el tamaño del viewport no cambia: nunca se re-dibuja la página, solo se hace cambia el tamaño de la ventana por la que la vemos, como si alejásemos el viewport para ver mas de su superficie con menos detalle o lo acercáramos para ver menos con mayor detalle.
Desgraciadamente, la interpretación de la escala por chrome y firefox es totalmente contraria: mientras que en el primero a menor escala mas cerca está el viewport, en firefox es al contrario.
2.3. user-scalable
Esto nunca debería haberse inventado. No es humano impedir al usuario cambiar la escala, porque la visibilidad de la página depende de la resolución de la pantalla: si tienes muchos píxeles en poca superficie, las cosas pueden aparecer muy pequeñas, y entonces no poder acercar el viewport impide una visualización cómoda.