El viewport es la parte de la ventana del navegador en la que se puede ver el contenido de la página. Si el ancho del contenido de la página es menor o mayor que el ancho del viewport, es posible que no se renderice correctamente en las pantallas de dispositivos móviles. Por ejemplo, si el ancho del contenido es demasiado grande, es posible que se reduzca su tamaño para que se ajuste, lo que dificulta la lectura del texto.
Cómo falla la auditoría de ancho de contenido de Lighthouse
Lighthouse marca las páginas cuyo ancho no es el mismo que el del viewport:
![Auditoría de Lighthouse que muestra contenido que no tiene el tamaño correcto para el viewport](https://developer.chrome.google.cn/static/docs/lighthouse/pwa/content-width/image/lighthouse-audit-showing-d4b33e60becd3.png?authuser=7&hl=es-419)
La auditoría falla si window.innerWidth
no es igual a window.outerWidth
.
Cómo hacer que tu página se ajuste a las pantallas de los dispositivos móviles
Esta auditoría es una forma indirecta de determinar si tu página está optimizada para dispositivos móviles. Consulta los Conceptos básicos del diseño web responsivo de Google para obtener una descripción general de cómo crear una página optimizada para dispositivos móviles.
Puedes ignorar esta auditoría en los siguientes casos:
- No es necesario que tu sitio esté optimizado para las pantallas de dispositivos móviles.
- El ancho del contenido de tu página es intencionalmente más pequeño o mayor que el ancho del viewport.