No tiene una etiqueta <meta name ="viewport"> con width o initial-scale

Published on Updated on

Translated to: English, Português, 한국어, 中文

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:

La auditoría de Lighthouse muestra que a la página le falta una 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 content incluye el texto de width=.

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-width establece el ancho de la ventana gráfica al ancho del dispositivo.
  • initial-scale=1 establece el nivel de zoom inicial cuando el usuario visita la página.

Recursos

Last updated: Improve article

We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.