PageSpeed: Specify a viewport for mobile browsers (deprecated)

Overview

If your page has been designed with mobile devices in mind, then you should utilize the viewport meta tag so that mobile devices can render the document at the correct size.

Note: This rule is experimental.

What is a viewport?

The viewport meta tag is a way to let developers control how a user's browser will display a page, specifically the size and scale of the page. Since mobile viewing of a website is now common place, the popularity of this particular tag has increased.

The following is an example of the viewport meta tag in use.

<meta name="viewport"
      content="width=device-width, initial-scale=1, maximum-scale=1">

The width property determines the size of the page. You can either specify a particular size, such as width=500 (if you want the width to be 500px), or you can set it to 'device-width' if you want the width to be the size of the window when it is at a scale of 100%. The 'initial-scale' property controls the zoom level on initial page load. The 'maximum-scale' property controls the max limitation of zooming.

Configuring your webpage using the viewport meta tag can be time consuming, and we have only mentioned a few different properties. Be aware that Page Speed only checks for the presence of the viewport meta tag currently, so do not feel pressured to fully configure your site using the tag.