뷰포트 설정에 맞게 내용 크기 조정

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

개요

在桌面设备和移动设备上，用户习惯于垂直（而非水平）滚动浏览网站，而强制用户水平滚动或缩小以查看完整网页会给用户带来很差的体验。

在使用元视口代码모바일 웹 사이트를 개발할 때 특정 뷰포트에 적용되지 않는 웹 페이지 컨텐츠를 실수로 만드는 경우가 많습니다. 예를 들어, 뷰포트의 폭보다 큰 그림을 뷰포트에 표시하면 뷰포트를 수평으로 스크롤해야 합니다. 뷰포트의 폭에 맞게 이 내용을 조정해야 합니다. 이렇게 하면 뷰포트를 수평으로 스크롤할 필요가 없습니다.

建议

不同的设备其屏幕尺寸会有很大的差异（例如，手机和平板电脑，甚至是不同款的手机），为此您应적절한 뷰포트 구성，以便您的网页能在许多不同的设备上正确呈现。然而，由于视口宽度（以CSS像素为单位）可能会有所不同，因此，您的网页内容不应依赖于能正常显示的特定视口宽度。

• 避免为网页元素设置较大的绝对CSS宽度（例如，div{width:360px;}폭이 320 CSS 픽셀인 iPhone과 같이 폭이 좁은 장치에서 요소가 너무 넓어질 수 있기 때문입니다. 상대적인 폭 값(예: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 라이센스. For details, see our Site Policies.