调整内容的尺寸，使其符合视口设置

当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 the Creative Commons Attribution 3.0 License, and code samples are licensed under the Apache 2.0 License. For details, see our Site Policies.