Skip to content
Aprender Medir Blog Case studies About
En esta página
  • Cómo falla la auditoría de metaetiqueta de la ventana gráfica de Lighthouse
  • Cómo agregar una metaetiqueta de ventana gráfica
  • Recursos

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

May 2, 2019 — Actualizado Aug 20, 2019
Available in: 한국어, Português, 中文, English
Appears in: Auditorias de las PWA|Auditorias SEO
En esta página
  • Cómo falla la auditoría de metaetiqueta de la ventana gráfica de Lighthouse
  • Cómo agregar una metaetiqueta de ventana gráfica
  • Recursos

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 #

  • Código fuente para la auditoria de Tiene una etiqueta <meta name="viewport"> con width o initial-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
Última actualización: Aug 20, 2019 — Mejorar el artículo
Return to all articles
Compartir
suscribir

Contribute

  • Presentar un error
  • Ver fuente

Contenido relevante

  • developer.chrome.com
  • Chrome Actualizaciones
  • Web Fundamentals
  • Case studies
  • Podcasts
  • Shows

Conectar

  • Twitter
  • YouTube
  • Google Developers
  • Chrome
  • Firebase
  • Google Cloud Platform
  • Todos los productos
  • Condiciones y privacidad
  • Principios de la Comunidad

Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 4.0 License, and code samples are licensed under the Apache 2.0 License. For details, see the Google Developers Site Policies.