Muchos motores de búsqueda clasifican las páginas en función de su nivel de optimización para dispositivos móviles. 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.