Muchos motores de búsqueda clasifican las páginas en función de su optimización para dispositivos móviles. Sin una metaetiqueta de viewport, los dispositivos móviles renderizan páginas en anchos típicos de pantalla de computadoras de escritorio y, luego, reducen el tamaño de las páginas, lo que dificulta la lectura.
Configurar la metaetiqueta de la vista del puerto te permite controlar el ancho y el escalamiento del viewport para que se ajuste de forma correcta en todos los dispositivos.
Cómo falla la auditoría de 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 si no se cumplen todas estas condiciones:
- El <head> del documento contiene una etiqueta <meta name="viewport">.
- La metaetiqueta de la vista del puerto contiene un atributo content.
- El valor del atributo content incluye el texto width=.
Lighthouse no verifica que width sea igual a device-width. Tampoco verifica un par clave-valor initial-scale. Sin embargo, debes incluir ambos para que la página se renderice correctamente en dispositivos móviles.
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>
…
A continuación, se explica qué hace cada par clave-valor:
- width=device-width establece el ancho del viewport en función del ancho del dispositivo.
- initial-scale=1 establece el nivel de zoom inicial cuando el usuario visita la página.