Отрегулируйте размер содержимого в соответствии с настройками видового экрана

On this page

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

Обзор

На десктопных и мобильных устройствах пользователи привыкли прокручивать веб-сайты вертикально (а не горизонтально), в то время как принуждение пользователей прокручивать горизонтально или сужать их, чтобы просматривать полные веб-страницы, вызывает у пользователей плохой опыт.

в пользовании元视口代码В процессе разработки мобильного веб-сайта вы часто непреднамеренно создаете веб-контент, который не подходит для указанного видового экрана. Например, если в видовом экране отображается картинка, превышающая ширину видового экрана, пользователь будет вынужден прокручивать этот видовый экран горизонтально. Следует скорректировать это содержимое таким образом, чтобы оно соответствовало ширине видового экрана. Таким образом, пользователю не придется прокручивать видовые экраны горизонтально.

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

Различные устройства будут иметь большие различия в размерах их экранов (например, мобильные телефоны и планшеты или даже разные модели телефонов), для этого вы должныНастройка соответствующего видового портаЧтобы ваша веб-страница была правильно представлена на многих различных устройствах. Однако, поскольку ширина видового экрана (в пикселях CSS) может варьироваться, содержание вашей веб-страницы не должно зависеть от конкретной ширины видового экрана, которая может нормально отображаться.

  • 避免为网页元素设置较大的绝对CSS宽度（例如，div{width:360px;}），因为这可能会导致该元素在宽度较窄的设备（例如，像iPhone这类其宽度为320 CSS像素的设备）上显得过宽。请考虑使用相对宽度值（例如，width: 100%). Кроме того, следует обратить внимание на то, что использование больших абсолютных значений позиционирования может привести к тому, что элемент выйдет за пределы видового экрана меньшего экрана.
  • 如有必要，您可以使用CSS媒体查询为较小或较大屏幕应用不同的样式。这篇Статьи HTML5 RocksБыли даны дополнительные рекомендации относительно путей достижения этой цели.
  • Для изображения см.Эта статья，其中提供了有关如何在网页呈现期间且在不产生不必要网页重排的情况下提供相应大小图片的完整概览。

 

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