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

Обзор

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

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

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

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

• 避免為網(wǎng)頁元素設(shè)置較大的絕對CSS寬度（例如，div{width:360px;}），因為這可能會導(dǎo)致該元素在寬度較窄的設(shè)備（例如，像iPhone這類其寬度為320 CSS像素的設(shè)備）上顯得過寬。請考慮使用相對寬度值（例如，width: 100%). Кроме того, следует обратить внимание на то, что использование больших абсолютных значений позиционирования может привести к тому, что элемент выйдет за пределы видового экрана меньшего экрана.
• 如有必要，您可以使用CSS媒體查詢為較小或較大屏幕應(yīng)用不同的樣式。這篇Статьи HTML5 RocksБыли даны дополнительные рекомендации относительно путей достижения этой цели.
• Для изображения см.Эта статья，其中提供了有關(guān)如何在網(wǎng)頁呈現(xiàn)期間且在不產(chǎn)生不必要網(wǎng)頁重排的情況下提供相應(yīng)大小圖片的完整概覽。

?

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.