La ventana gráfica es el área que ve el usuario en la pantalla cuando accede a un sitio web desde cualquier dispositivo.
Antes, todo era simple: como la resolución de las pantallas era más o menos la misma, solo había que crear un diseño de maquetación con un solo ancho, y nadie se quejaría. Ahora es más complicado: los usuarios acceden a los sitios web desde diferentes dispositivos, y la resolución de la pantalla varía mucho.
Para que sea cómodo usar sitios web, es necesario escalar las páginas correctamente. Para esto, se usa la metaetiqueta viewport. No hace que el diseño de la maquetación se adapte. Su propósito es controlar la escala de visualización de la página.
Usemos el poder de las capturas de pantalla para comprender el significado de la metaetiqueta viewport.
Creé un documento HTML con dos oraciones:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<title>HTML está aquí</title>
<link href="css/style.css" rel="stylesheet">
</head>
<body>
<p>Este texto debe ser legible en todos los dispositivos sin ampliar la página con gestos. Abrió y leyó.</p>
</body>
</html>Así se ve en el escritorio.
No es perfecto, pero se puede leer. Ahora utilicemos las herramientas del desarrollador y veamos cómo se ve esta misma página en la pantalla de un teléfono inteligente.
¿Por qué tan mal? Porque el navegador cree que la página está destinada a un escritorio e intenta insertarla en las dimensiones de la pantalla. Seguramente aún encontrará sitios web que deben escalarse con los dedos. Esto quedó en el siglo pasado.
Ahora agreguemos una línea a nuestro código:
<meta name="viewport" content="width=device-width, initial-scale=1.0">Quedará así:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <!--Línea que hace la magia-->
<title>HTML está aquí</title>
<link href="css/style.css" rel="stylesheet">
</head>
<body>
<p>Este texto debe ser legible en todos los dispositivos sin ampliar la página con gestos. Abrió y leyó.</p>
</body>
</html>Actualice la página y vea cómo se ve ahora en la pantalla del teléfono inteligente.
Con esto ya se puede trabajar, al menos el texto se puede leer sin ampliar. Por supuesto, esto todavía no es un diseño adaptable. Pero dimos el primer paso: le dijimos al navegador que la página debe optimizarse para una pantalla pequeña.
Para que esto no parezca magia, comprendamos cómo funciona la metaetiqueta viewport.
Dos Resoluciones de Pantalla: Física y CSS
La aparición de pantallas con alta densidad de píxeles presentó un nuevo problema para los desarrolladores: con los mismos tamaños físicos, los smartphones pueden tener diferentes resoluciones. Debido a esto, el texto que se muestra normalmente en una pantalla se ve notablemente más pequeño en otra.
La metaetiqueta viewport resuelve este problema de diseño adaptativo con dos parámetros: width (ancho) e initial-scale (escala inicial).
El parámetro width=device-width iguala el ancho de la ventana gráfica al ancho CSS del dispositivo. CSS no es un tamaño físico, sino una magnitud diseñada para que el diseño adaptativo se muestre igual en todas las pantallas.
La resolución CSS depende de la densidad de píxeles.
- Si la densidad de píxeles es menor que 200 ppp, el coeficiente será 1. Es decir, una pantalla con una resolución física de 320 x 480 píxeles tendrá una resolución CSS de 320 x 480 píxeles.
- Densidad de píxeles 200-300 ppp: coeficiente 1,5.
- Densidad de píxeles superior a 300 ppp: el coeficiente se calcula mediante la fórmula densidad/150 y el valor obtenido se redondea (2, 2,5, 3, etc.).
El tamaño del área de visualización de un dispositivo específico se puede encontrar en este sitio web, por lo que no es necesario calcularlo por tu cuenta. Pero de todos modos, no es posible adaptarse a todas las pantallas, hay demasiadas. Por lo tanto, al diseñar, se suelen utilizar valores universales.
Uso Correcto de la metaetiqueta viewport
Se pueden definir los siguientes parámetros para el área de visualización:
- width (ancho): ancho del área de visualización. Acepta el valor device-width o un número real de píxeles como un número entero no negativo, por ejemplo, 320px.
- height (alto): alto del área de visualización. Acepta el valor device-height o un número real de píxeles.
- initial-scale (escala inicial): coeficiente de ampliación del tamaño inicial de la ventana gráfica. Acepta valores de 0,1 a 10. El valor 1,0 indica ausencia de ampliación.
- user-scalable: indica si el usuario puede ampliar la página con gestos. Acepta el valor
yesono. - minimum-scale (escala mínima): valor mínimo de ampliación. Acepta valores de 0,1 a 10. El valor 1,0 indica ausencia de ampliación.
- maximum-scale (escala máxima): valor máximo de ampliación. Acepta valores de 0,1 a 10. El valor 1,0 indica ausencia de ampliación.
El uso universal de la metaetiqueta viewport es el siguiente:
<meta name="viewport" content="width=device-width, initial-scale=1.0">En esta regla, indicamos que el ancho del área visible es igual al ancho del dispositivo y que no hay ampliación inicial. En la mayoría de los casos, este es el escenario de funcionamiento óptimo de la página.
También podemos jugar con los valores, por ejemplo, establecer un ancho específico en píxeles:
<meta name="viewport" content="width=980px, initial-scale=1.0">Veamos qué pasó con la página.
Apareció un desplazamiento horizontal. Esto es muy inconveniente, especialmente cuando hay mucho texto en la página. Todo debido a que el navegador muestra la página con un ancho de 980 px.
Agregar el ancho de la página en píxeles puede ser útil si la plantilla no tiene un diseño adaptable. Por ejemplo, si el ancho del diseño es de 1024 píxeles, debes especificarlo en el atributo width. Entonces, los navegadores no recortarán los lados. Lo más importante es no prohibir a los usuarios ampliar para que puedan acercar la página y no agregar el atributo initial-scale:
<meta name="viewport" content="width=1024">Puedes modificar el valor de la escala inicial. Por ejemplo, hazlo no 1,0, sino 5,0. Entonces, la página se ampliará 5 veces al abrirla en el navegador. También puedes especificar los valores mínimos y máximos de ampliación que están disponibles para los usuarios.
Debes ser muy cuidadoso con el atributo user-scalable. Por defecto, su valor es yes, es decir, los usuarios pueden ampliar la página con gestos. La especificación HTML no recomienda encarecidamente prohibir la ampliación de la página.
<!--NO HAGAS ESTO-->
<meta name="viewport" content="user-scalable=no">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">Los validadores se quejan de tal uso de atributos y proponen pensarlo bien antes de prohibir a los usuarios cambiar el tamaño del documento.
Es cierto que en la misma especificación hay una explicación de que la prohibición se puede establecer en casos excepcionales. Como ejemplo, se mencionan las aplicaciones de mapas, donde la ampliación se realiza mediante scripts. Pero la recomendación general es no prohibir a los usuarios controlar el tamaño de la página.
Error: No se ha Establecido el Valor de la metaetiqueta viewport
El mensaje de que no se ha establecido el valor de la metaetiqueta viewport generalmente indica que la herramienta de verificación no pudo encontrar la regla necesaria en el código HTML.
Para corregir este error, asegúrate de que la metaetiqueta viewport esté dentro del bloque <head>, </head>. Se recomienda utilizar el panel de desarrollador en el navegador para verificar, no el código de página original. Puede haber un error en el código original que mueva la regla al bloque . Verás esto de inmediato a través del panel de desarrollador en el navegador.
Si la metaetiqueta está en el lugar correcto, con los atributos y valores adecuados, es posible que la herramienta de verificación esté equivocada. Esto sucede: los webmasters se quejan de que Yandex y Google les informan periódicamente sobre tal problema, aunque en realidad no existe.
