Una etiqueta de metadatos muy usada hoy en día es <meta name="viewport">. Para entenderla bien, hay que tener muy claro primero que significa exactamente la palabra viewport.
¿Qué es el Viewport?
El viewport es la palabra clave con la que se define la región visible del navegador, es decir, la parte que se ve en este momento en nuestro navegador. Por lo tanto, al utilizar esta etiqueta, mediante el atributo content podremos indicar su comportamiento en dispositivos móviles:
| Etiqueta | Descripción |
|---|---|
<meta name="viewport"> | Comportamiento de la región visible del navegador. Ver Responsive. |
En muchas ocasiones te habrás encontrado con páginas que en dispositivos móviles aparecen exactamente igual que en navegadores de escritorio, y la forma de navegar por ella es simplemente hacer zoom para ampliarla. Esto es el comportamiento por defecto de una página que no ha indicado una etiqueta <meta name="viewport">.
Si añadimos esta etiqueta a una página, evitaremos dicho comportamiento y permitiremos que el navegador amplíe el tamaño con una escala más grande, y que sea más fácil navegador por ella. Luego, podremos aplicar código CSS para hacer más cómoda su visualización e interacción.
Parámetros de viewport
Veamos un fragmento de código típico que suele utilizarse con esta etiqueta. Observa que todos los parámetro se incluyen en el atributo content, separándose con comas y estableciendo sus valores con el signo =:
<head>
<meta name="viewport" content="width=device-width,initial-scale=1">
</head>
Así pues, la etiqueta <meta name="viewport"> nos permite indicar ciertos parámetros o comportamientos que queremos aplicar a dicha región visible del navegador, generalmente relacionados con el responsive.
Los parámetros que podemos utilizar son los siguientes:
| Parámetro | Valor por defecto | Descripción |
|---|---|---|
width | device-width | Establece el tamaño del viewport. Permite valores numéricos. |
height | device-height | Idem al anterior, pero respecto al alto. Permite valores numéricos. |
initial-scale | 1 | Establece la escala inicial que tendrá el dispositivo. Valores entre 0.1 y 10. |
minimum-scale | 0.1 | Idem al anterior, pero estableciendo la escala mínima que tendrá el dispositivo. |
maximum-scale | 10 | Idem al anterior, pero estableciendo la escala máxima que tendrá el dispositivo. |
user-scalable | 1 | Mediante 1 o yes se permite que el usuario haga zoom. Con 0 o no, se impide. |
interactive-widget | resizes-visual | Comportamiento de widgets de UI como el teclado virtual. Otros valores posibles: resizes-content o overlays-content. |
Habitualmente, los valores indicados suelen ser width y initial-scale, sin embargo, el desarrollador puede especificar los que considere necesarios.
