Adaptación del contenido a la ventana gráfica

Esta regla se activa cuando PageSpeed Insights detecta que el contenido de la página no se ajusta horizontalmente dentro del tamaño de la ventana gráfica especificada, lo que obliga al usuario a desplazarse horizontalmente para ver todo el contenido.

Información general

Tanto en los ordenadores como en los dispositivos móviles, los usuarios están acostumbrados a desplazarse verticalmente, no en horizontal, por lo que, si deben hacer esto último para ver toda la página, empeoraría la experiencia de usuario.

Al desarrollar un sitio para móviles con una metaetiqueta de ventana gráfica, es fácil crear por error contenido que no se adapte a la ventana gráfica especificada. Por ejemplo, las imágenes que son más anchas que la ventana pueden hacer que esta ocupe más espacio horizontal del deseado. Debes ajustar el contenido para que encaje dentro del ancho de la ventana gráfica, de modo que el usuario no tenga que desplazarse horizontalmente.

Recomendaciones

Dado que las dimensiones de pantalla varían enormemente entre los dispositivos (por ejemplo, entre los teléfonos y los tablets, e incluso entre los distintos teléfonos), debes configurar la ventana gráfica para que las páginas se muestren correctamente en los distintos dispositivos. Sin embargo, dado que el ancho (en píxeles CSS) de la ventana gráfica puede variar, la visualización correcta del contenido de la página no debería depender del ancho de la ventana.

  • Evita establecer anchos absolutos en CSS para los elementos de página (como div{width:360px;}), ya que esto puede hacer que el elemento sea más ancho que el admitido por el dispositivo (por ejemplo, el iPhone tiene un ancho de 320 píxeles CSS). En su lugar, recomendamos usar valores de anchura relativos, como width:100%. Del mismo modo, ten cuidado al usar valores de posición absolutos muy altos que hagan que el elemento se salga de la ventana gráfica en las pantallas pequeñas.
  • Si fuera necesario, puedes usar consultas de medios CSS para asignar distintos estilos a pantallas pequeñas y grandes. Puedes encontrar más recomendaciones sobre cómo hacerlo en este artículo de HTML5 Rocks.
  • Además, puedes leer este artículo si quieres saber cómo mostrar imágenes de tamaño adaptable sin que la página tenga que volver a procesarse.