Sin una metaetiqueta de viewport, los dispositivos móviles renderizan páginas en anchos de pantalla de computadora de escritorio y, luego, reducen la escala de las páginas, lo que dificulta la 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.
Cómo falla la auditoría de la metaetiqueta de la vista del puerto de Lighthouse
Lighthouse marca las páginas sin una metaetiqueta de viewport:
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>
…
Cada par clave-valor hace lo siguiente:
- 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.
Escala inicial inferior a 1
Cuando initial-scale se establece en menos de 1, es posible que los navegadores habiliten una función de presionar dos veces para hacer zoom, que generalmente se usa en 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 realiza un segundo toque "dos veces". Por lo tanto, la auditoría también falla cuando la escala inicial se establece en menos de 1.