RWD Viewport

The Viewport is the user's visible area of a web page. It varies with device and screen size, and is often much smaller on a mobile phone than on a large desktop monitor.

The Viewport Meta Tag

Without a viewport meta tag, mobile browsers will assume your page is meant for desktop and will try to zoom out to fit the whole page, making the text tiny and unreadable.

To fix this, you must include the following <meta> element in all of your web pages:

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

What do these mean?

• width=device-width: Sets the width of the page to follow the screen-width of the device.
• initial-scale=1.0: Sets the initial zoom level when the page is first loaded by the browser.

Control Your Content

A responsive page should not have a fixed horizontal width. If an element is too wide, the user will be forced to scroll horizontally, which is a poor mobile user experience.