Sin una metaetiqueta de viewport, los dispositivos móviles renderizan páginas en anchos de pantalla de computadoras de escritorio típicos y, luego, las reducen, lo que dificulta su lectura.
Configurar la metaetiqueta de viewport te permite controlar el ancho y el escalamiento del viewport para que tenga el tamaño correcto en todos los dispositivos.
Por qué falla la auditoría de metaetiquetas de la ventana de visualización de Lighthouse
Lighthouse marca las páginas sin una metaetiqueta de la vista del puerto:
Una página no pasa la auditoría, a menos que se cumplan todas estas condiciones:
- El <head> del documento contiene una etiqueta <meta name="viewport">.
- La metaetiqueta de viewport contiene un atributo content.
- El valor del atributo content incluye el texto width=.
Cómo agregar una metaetiqueta de viewport
Agrega una etiqueta <meta> de viewport con los pares clave-valor adecuados al <head> de tu página:
<!DOCTYPE html>
<html lang="en">
<head>
…
<meta name="viewport" content="width=device-width, initial-scale=1">
…
</head>
…
Esto es lo que hace cada par clave-valor:
- width=device-width establece el ancho de la ventana de visualización en el ancho del dispositivo.
- initial-scale=1 establece el nivel de zoom inicial cuando el usuario visita la página.
Escala inicial inferior a 1
Cuando initial-scale se establece en menos de 1, puede provocar que los navegadores habiliten una función de zoom con doble toque, que se suele usar para sitios para computadoras de escritorio que no están optimizados para dispositivos móviles. Esto agrega una demora de 300 milisegundos a cualquier interacción de toque mientras el navegador espera para verificar si se produce un segundo toque "doble". Por lo tanto, la auditoría también falla cuando el valor de initial-scale es menor que 1.