Cambiar el tamaño del contenido para que se ajuste a la configuración de la ventana gráfica

Esta regla se activa cuando PageSpeed ​​​​Insights detecta que el contenido de una página web no cabe horizontalmente dentro de una ventana gráfica de las dimensiones especificadas, lo que obliga al usuario a desplazarse por la página horizontalmente para ver todo el contenido.

descripción general

Tanto en computadoras de escritorio como en dispositivos móviles, los usuarios están acostumbrados a desplazarse por los sitios web verticalmente en lugar de horizontalmente, y obligar a los usuarios a desplazarse horizontalmente o alejarse para ver una página completa es una mala experiencia de usuario.

En usocódigo de meta ventana gráficaAl desarrollar un sitio móvil, a menudo es posible crear sin darse cuenta contenido web que no es apropiado para una ventana gráfica determinada. Por ejemplo, mostrar una imagen en una ventana gráfica que es más grande que el ancho de la ventana gráfica obliga al usuario a desplazarse por la ventana gráfica horizontalmente. Debe ajustar este contenido para que se ajuste al ancho de la ventana gráfica. De esta manera, el usuario no tiene que desplazarse horizontalmente por la ventana gráfica.

sugerencia

Los diferentes dispositivos tienen tamaños de pantalla muy diferentes (por ejemplo, teléfonos móviles y tabletas, e incluso diferentes modelos de teléfonos móviles), por lo que convieneConfigurar la ventana gráfica correspondiente, para que sus páginas se muestren correctamente en muchos dispositivos diferentes. Sin embargo, debido a que los anchos de la ventana gráfica (en píxeles CSS) pueden variar, su contenido web no debe depender de un ancho de ventana específico para mostrarse correctamente.

• Evite establecer anchos CSS absolutos grandes para elementos web (p. ej.,div{ancho:360px;}), ya que esto puede hacer que el elemento parezca demasiado ancho en dispositivos con anchos más estrechos (por ejemplo, dispositivos como el iPhone, que tienen un ancho de 320 píxeles CSS). Considere usar valores de ancho relativo (por ejemplo,ancho: 100%). Además, debe tener en cuenta que el uso de valores de posicionamiento absoluto grandes puede hacer que el elemento sobresalga más allá de la ventana gráfica en pantallas más pequeñas.
• Si es necesario, puede utilizarconsultas de medios CSSAplique diferentes estilos para pantallas más pequeñas o más grandes. Este artículoArtículo sobre HTML5 RocksSe proporcionan más sugerencias sobre cómo lograrlo.
• Para imágenes, consulteEste artículo, que proporciona una descripción completa de cómo servir imágenes del tamaño adecuado durante la representación de la página sin reflujos de página innecesarios.

Salvo que se indique lo contrario, el contenido de esta página tiene licencia bajo laLicencia Creative Commons Atribución 3.0y los ejemplos de código tienen licencia bajo laLicencia Apache 2.0Para más detalles, consulte nuestraPolíticas del sitio.