Адаптируйте размер контента для области просмотра

Это правило срабатывает, когда PageSpeed Insights обнаруживает, что содержимое страницы шире указанной области просмотра и пользователь вынужден выполнять горизонтальную прокрутку.

Общая информация

Пользователи ПК и мобильных устройств привыкли выполнять вертикальную, а не горизонтальную прокрутку веб-сайтов. Если для просмотра всего содержания необходимо прокрутить сайт по горизонтали или уменьшить масштаб, это вызывает неудобства.

При разработке сайта для мобильных устройств с мета-тегом viewport вы можете случайно расположить содержание так, что оно не поместится в указанную область просмотра. Например, если изображение шире области просмотра, может возникнуть необходимость в горизонтальной прокрутке. Во избежание этого нужно изменить контент так, чтобы он помещался целиком.

Рекомендации

Так как размер экрана различается на разных устройствах (например, на телефонах/планшетных ПК и даже на разных телефонах), необходимо настроить область просмотра таким образом, чтобы на всех экранах страницы отображались корректно. Однако ширина области просмотра (в пикселях CSS) может варьироваться, поэтому не следует подгонять содержание страницы под определенный размер области просмотра.

  • Не устанавливайте в CSS большую абсолютную ширину для элементов страницы (например, div{width:360px;}), так как они могут оказаться слишком широкими для области просмотра на узких экранах (например, если ширина экрана составляет 320 пикселей, как у iPhone). Вместо этого используйте относительные значения, например width:100%. По тем же соображениям избегайте больших абсолютных значений при указании расположения элементов, так как те могут оказаться за пределами области просмотра на маленьких экранах.
  • При необходимости можно использовать запросы CSS media для применения разных стилей на больших и маленьких экранах. Подробнее читайте в этой статье.
  • Здесь вы найдете общую информацию о том, как использовать изображения адаптивного размера без пересчета положения элементов на странице.