No tiene una etiqueta <meta name ="viewport"> con width o initial-scale
Published on • Updated on
Muchos motores de búsqueda clasifican las páginas en función de su compatibilidad con dispositivos móviles. Sin una viewport meta tag (metaetiqueta de ventana gráfica), los dispositivos móviles procesan las páginas con los anchos típicos de la pantalla de una computadora de escritorio y luego reducen el tamaño de las páginas, lo que hace que su lectura sea más difícil.
La configuración de la metaetiqueta de la ventana gráfica te permite controlar el ancho y la escala de la ventana gráfica para que tenga el tamaño correcto en todos los dispositivos.
Cómo falla la auditoría de metaetiqueta de la ventana gráfica de Lighthouse
Lighthouse marca páginas sin una metaetiqueta de ventana gráfica:
Una página no pasa la auditoría a menos que se cumplan todas las siguientes condiciones:
- En el
<head>del documento contiene una etiqueta de<meta name="viewport">. - La metaetiqueta de la ventana gráfica contiene un atributo de
content. - El valor del atributo de
contentincluye el texto dewidth=.
Lighthouse no comprueba que el width sea igual al device-width. Tampoco busca un par clave-valor de initial-scale. Sin embargo, aún debes de incluir ambos para que tu página se muestre correctamente en dispositivos móviles.
In the Lighthouse report UI the full PWA badge is given when you pass all of the audits in all of the PWA subcategories (Fast and reliable, Installable, and PWA optimized).
Cómo agregar una metaetiqueta de ventana gráfica
Agrega una etiqueta de <meta> de la ventana gráfica con los pares clave-valor apropiados 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-widthestablece el ancho de la ventana gráfica al ancho del dispositivo.initial-scale=1establece el nivel de zoom inicial cuando el usuario visita la página.
Recursos
Updated on • Improve article