Click here to see your recently viewed pages and most viewed pages.
Hide

Size Content to Viewport

This rule triggers when PageSpeed Insights detects that the page content does not fit horizontally within the specified viewport size, thus forcing the user to pan horizontally to view all the content.

Overview

On both desktop and mobile devices, users are used to scrolling websites vertically but not horizontally, and forcing the user to scroll horizontally or to zoom out in order to see the whole page results in a poor user experience.

When developing a mobile site with a meta viewport tag, it easy to accidentally create page content that doesn't quite fit within the specified viewport. For example, an image that is displayed at a width wider than the viewport can cause the viewport to scroll horizontally. You should adjust this content to fit within the width of the viewport, so that the user does not need to scroll horizontally.

Recommendations

Since screen dimensions vary widely between devices (e.g. between phones and tablets, and even between different phones), you should configure the viewport so that your pages render correctly on many different devices. However, since the width (in CSS pixels) of the viewport may vary, your page content should not rely on a particular viewport width to render well.

  • Avoid setting large absolute CSS widths for page elements (such as div{width:360px;}), since this may cause the element to be too wide for the viewport on a narrower device (e.g. a device with a width of 320 CSS pixels, such as an iPhone). Instead, consider using relative width values, such as width:100%. Similarly, beware of using large absolute positioning values that may cause the element to fall outside the viewport on small screens.
  • If necessary, CSS media queries can be used to apply different styling for small and large screens. This Web Fundamentals article provides further recommendations on how to go about this.
  • For images, this article provides a nice overview on how to serve responsively-sized images without incurring unnecessary page reflows during rendering.