RWD – Viewports

Posted on: November 14th, 2014 by alemieux

This will be the start of a series on responsive web design (RWD), a topic of great importance nowadays, with lots of directions and advice. I’ll focus on the necessary aspects for those who are just getting started.

The Viewport

One of the first aspects that needs to be addressed when developing a site for mobile devices is the viewport width and scale. When viewing sites on an iPhone, for example, the default experience (if the site has not been developed with Responsive Web Design in mind) is a lot of pinching, zooming, and scrolling on the users part. Without the viewport width and scale being considered, the iPhone is rendering the page in a way that it can be viewed entirely, which will make all of the text incredibly small and unreadable.

The viewport on the iPhone (and other devices) is the area that determines how content is laid out and where text wraps on the webpage. Additionally, the viewport can be larger or smaller than the visible area1.

With the default viewport setting, the content will appear in the viewport without any scaling and not necessarily at the width of the viewport. In order to change that, we need to apply a Meta tag in the head section of our HTML document:

<metaname=“viewport”content=“width=device-width, initial-scale=1” />

There are actually a bunch of attributes other than what’s being shown here, but this code snippet has been widely adopted 2. The 2 attributes we’re most concerned with are width and scaling.

Viewport Width

You could set this up to be whatever width you want to target, but since we’re talking about responsive design, the best thing to do is set the width to the device width. This will tell the browser to show the webpage at its own device width3. The effect will be that the page will be readable and will not require so much pinching, zooming, and scrolling.

Viewport Scaling

Here’s an example of a site viewed on an iPhone without the viewport scale set:

Setting the initial-scale does 2 things:

It sets the inital zoom factor of the page to the defined value, calculated relative to the ideal viewport. Thus it generates a visual viewport width.

It sets the layout viewport width to the visual viewport width it just calculated.4

The initial scale attribute is a ratio of 1 and will scale the content to the edge of the viewport. When it is set to 1 the page isn’t zoomed in.

In this example, the Viewport Meta tag is not included in the code and therefore, iOS uses its default width and scaling

In this example, the Viewport Meta tag is set. Notice the scaling and width of the site.

Now your page will render correctly within the viewport on mobile devices.

Next time, we’ll tackle HTML5 and how to make it work with older browsers.