Resize content to fit viewport settings

当PageSpeed Insights检测到网页内容不适合在指定尺寸的视口内水平显示，而强制用户水平移动网页以查看所有内容时，就会触发此规则。

概览

On desktop and mobile devices, users are accustomed to scrolling through websites vertically (rather than horizontally), and forcing users to scroll horizontally or zoom out to view the full web page can bring poor experience to users.

In use元视口代码开发移动网站的过程中，您往往会在无意中创建并不适用于指定视口的网页内容。例如，如果在视口中显示大于视口宽度的图片，会迫使用户水平滚动该视口。您应调整此内容，使其符合视口的宽度。这样一来，用户就不用水平滚动视口了。

Recommendations

Screen sizes vary greatly from device to device (for example, cell phones and tablets, or even different models of cell phones), so you shouldConfigure the corresponding viewport，以便您的网页能在许多不同的设备上正确呈现。然而，由于视口宽度（以CSS像素为单位）可能会有所不同，因此，您的网页内容不应依赖于能正常显示的特定视口宽度。

• 避免为网页元素设置较大的绝对CSS宽度（例如，div{width:360px;}), because this may cause the element to appear too wide on narrower devices such as the iPhone, which has a width of 320 CSS pixels. Consider using relative width values such as,width: 100%）。同样，您应注意使用较大的绝对定位值可能会导致元素超出较小屏幕的视口。
• 如有必要，您可以使用CSS媒体查询为较小或较大屏幕应用不同的样式。这篇HTML5 Rocks Articles提供了有关如何实现这一目标的进一步建议。
• 针对图像，请参阅这篇文章，其中提供了有关如何在网页呈现期间且在不产生不必要网页重排的情况下提供相应大小图片的完整概览。

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 theApache 2.0 License. For details, see our Site Policies.