Sin una metaetiqueta de viewport, los dispositivos móviles renderizan las páginas con los anchos de pantalla típicos de las computadoras de escritorio y, luego, las reducen, lo que dificulta su lectura.
Si configuras la metaetiqueta del viewport, puedes controlar el ancho y el escalamiento del viewport para que tenga el tamaño correcto en todos los dispositivos.
Cómo falla la auditoría de la metaetiqueta de la ventana gráfica de Lighthouse
Lighthouse marca las páginas que no tienen 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 etiqueta meta de la ventana gráfica contiene un atributo content.
- El valor del atributo content incluye el texto width=.
Cómo agregar una metaetiqueta de viewport
Agrega una etiqueta de viewport <meta> 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>
…
A continuación, se explica qué hace cada par clave-valor:
- width=device-width establece el ancho del viewport en el ancho del dispositivo.
- initial-scale=1 establece el nivel de zoom inicial cuando el usuario visita la página.
Initial-scale inferior a 1
Cuando el valor de initial-scale se establece en menos de 1, los navegadores pueden habilitar una función de doble toque para hacer zoom, que se suele usar para los sitios para computadoras 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 initial-scale se establece en menos de 1.