No tiene una etiqueta <meta name ="viewport"> con width o initial-scale
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.
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 #
- Código fuente para la auditoria de Tiene una etiqueta
<meta name="viewport">conwidthoinitial-scale - Conceptos básicos del diseño web responsivo
- Uso de la metaetiqueta de la ventana gráfica para controlar el diseño en navegadores móviles