Responsive Web Design Basics

Set the viewport

Pages optimized for a variety of devices must include a meta viewport element in the head of the document. A meta viewport tag gives the browser instructions on how to control the page's dimensions and scaling.

TL;DR

  • Use meta viewport tag to control the width and scaling of the browsers viewport.
  • Include width=device-width to match the screen's width in device independent pixels.
  • Include initial-scale=1 to establish a 1:1 relationship between CSS pixels and device independent pixels.
  • Ensure your page is accessible by not disabling user scaling.

In order to attempt to provide the best experience, mobile browsers will render the page at a desktop screen width (usually about 980px, though this varies across devices), and then try to make the content look better by increasing font sizes and scaling the content to fit the screen. For users, this means that font sizes may appear inconsistently and they have to double-tap or pinch-zoom in order to be able to see and interact with the content.

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

Using the meta viewport value width=device-width instructs the page to match the screen’s width in device independent pixels. This allows the page to reflow content to match different screen sizes, whether rendered on a small mobile phone or a large desktop monitor.

Some browsers will keep the page’s width constant when rotating to landscape mode, and zoom rather than reflow to fill the screen. Adding the attribute initial-scale=1 instructs browsers to establish a 1:1 relationship between CSS pixels and device independent pixels regardless of device orientation, and allows the page to take advantage of the full landscape width.

Remember

  • Use a comma to separate attributes to ensure older browsers can properly parse the attributes.

Ensure an accessible viewport

In addition to setting an initial-scale, you can also set the minimum-scale, maximum-scale and user-scalable attributes on the viewport. When set, these can disable the user’s ability to zoom the viewport, potentially causing accessibility issues.

Updated on 2014-04-30

Authors

Pete LePage

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.