Paginas_Responsive

Tipografia, Media Queries Viewport.
Viewport
El Viewport es una de las etiquetas más representativas de la web móvil, que nos permite configurar cómo debe interpretar una página el navegador web para móviles.
Inicialmente creada por Apple para definir diversas directrices sobre cómo el iPhone debe renderizar un documento web, el viewport es una etiqueta META que se ha convertido en unestándar en el momento actual. La mayoría de dispositivos móviles la soportan en la mayor gama de sistemas operativos, lo que la convierte en un integrante imprescindible para cualquier página que esté pensada para verse también en dispositivos en movilidad.
Básicamente, sirve para definir qué área de pantalla está disponible al renderizar un documento, cuál es nivel de escalado que puede realizar elusuario, así como si el navegador debe mostrarla con algún zoom inicial.
Aunque el viewport es algo propio de navegadores para móviles y cobra sentido justamente cuando estemos pensando en estos dispositivos con pantallas reducidas, podemos entenderlo primero en el contexto de un navegador de escritorio.
El viewport en un navegador en cualquier ordenador con sistemas tradicionales es igual alárea de la ventana, o mejor dicho, al área disponible para renderizar el documento web (o sea, le restamos toda la interfaz del navegador, como botones, barra de direcciones, barra de menús, barras de desplazamiento, etc.) Dicho de otro modo, es el área útil donde se mostrará la página web.
Bien, pues el viewport cuando estamos hablando de dispositivos móviles, no corresponde al tamaño real de lapantalla en píxeles, sino al espacio que la pantalla está emulando que tiene. Por ejemplo, en un iPhone, aunque la pantalla en vertical tiene unas dimensiones de 320 píxeles, en realidad el dispositivo está emulando tener 980 píxeles. Esto hace que ciertas páginas web (optimizadas para navegadores de escritorio) quepan en una pantalla de 320 píxeles, porque en realidad el Safari para iOS estáemulando tener un espacio de 980 píxeles.
Pues bien, el viewport en estos casos es el espacio que el dispositivo emula tener, no la resolución real en píxeles que tiene la pantalla. Lo interesante en este caso es que los desarrolladores somos capaces de alterar el viewport que viene configurado en el navegador, algo que resulta totalmente necesario si queremos que nuestra página se vea correctamenteen dispositivos de movilidad.
Com configurar la etiqueta Viewport
Cuando Safari de iOS renderiza un documento web, hace un escalado de los contenidos para que las páginas diseñadas para sistemas de escritorio se vean más o menos bien en un teléfono móvil. Como pudiste apreciar en la primera imagen de este artículo, al verse el sitio web de DesarrolloWeb.com, los contenidos aparecían muypequeñitos y ello nos obliga a hacer zoom para poder leerlos. Sin embargo, nosotros podemos configurar el viewport para decirle a Safari, o cualquier otro navegador para móviles, qué debe hacer en este sentido.

Es altamente recomendable que se altere la etiqueta viewport para conseguir que tu navegador se comporte como tú deseas, especialmente en el caso de las páginas que estamos diseñando para versecorrectamente en pantallas pequeñas. Para ello disponemos de los siguientes parámetros en la etiqueta META.
Width: anchura virtual (emulada) de la pantalla o anchura del viewport.
Height: altura virtual de la pantalla o anchura del viewport.
Initial-scale: la escala inicial del documento.
Minimum-scale: la escala mínima que se puede poner en el documento.
Maximum-scale: la escala máximaconfigurable en el documento.
User-scalable: si se permite o no al usuario hacer zoom.
Como puedes ver, en la META viewport no se indica simplemente las dimensiones de la pantalla emulada, sino también el nivel de zoom que se puede estar configurando inicialmente y el nivel de zoom que se permitiría tener.
Un ejemplo de etiqueta viewport sería el siguiente:

La anchura y la altura...