Diseño web responsive -Viewport

¿Qué es Viewport?

viewport es el área visible de la página web del usuario.

viewport también puede traducirse al chino como '视区'.

El navegador móvil coloca la página en una "ventana" virtual (viewport), que normalmente es más ancha que la pantalla, de modo que no es necesario comprimir cada página web en una ventana muy pequeña (lo que rompería el diseño de las páginas no optimizadas para navegadores móviles), y los usuarios pueden ver diferentes partes de la página web mediante desplazamiento y zoom.

Configurar Viewport

Una etiqueta meta viewport común para páginas optimizadas para móviles es aproximadamente la siguiente:

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

• width: controla el tamaño del viewport; puede especificar un valor, como 600, o un valor especial, como device-width, que es el ancho del dispositivo (en píxeles CSS cuando la escala es del 100%).
• height: corresponde a width, especifica la altura.
• initial-scale: la escala de zoom inicial, es decir, la escala cuando la página se carga por primera vez.
• maximum-scale: la escala máxima a la que el usuario puede hacer zoom.
• minimum-scale: la escala mínima a la que el usuario puede hacer zoom.
• user-scalable: si el usuario puede hacer zoom manualmente.

El siguiente ejemplo demuestra el efecto en dispositivos móviles con y sin viewport:

Ejemplo 1: sin añadir viewport:

Ejemplo 2: añadir viewport:

Si accedes desde una tableta o un teléfono móvil, puedes hacer clic directamente para ver el efecto.