Please note that the contents of this offline web site may be out of date. To access the most recent documentation visit the online version .
Note that links that point to online resources are green in color and will open in a new window.
We would love it if you could give us feedback about this material by filling this form (You have to be online to fill it)



View Source | Submit Feedback

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.

In this guide

  1. Ensure an accessible viewport

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.

Page without a viewport set See example
Page with a viewport set See example

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.

Next Sections

  1. Set the viewport
  2. Size content to the viewport
  3. Use CSS media queries for responsiveness
  4. How to choose breakpoints

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 .