RWD Viewport

Responsive Web Design: The Viewport

Understanding and controlling the viewport is the first step towards creating responsive websites that adapt to different screen sizes.

What is The Viewport?

The viewport is the user’s visible area of a web page within the browser window. Its size varies significantly depending on the device – from large desktop monitors to small smartphone screens.

Historically, websites were often designed with fixed widths suitable for desktop screens. When mobile browsing became popular, mobile browsers initially tried to display these fixed-width sites by zooming out (‘shrinking’) the entire page to fit the smaller screen. This resulted in tiny, unreadable text and required users to constantly zoom and pan.

This ‘quick fix’ was not a good user experience.

Setting The Viewport Meta Tag

HTML5 introduced the viewport <meta> tag, allowing developers to control the viewport’s size and scale, providing a foundation for responsive design.

You should include the following <meta> tag within the <head> section of all your HTML documents:

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

Let’s break down the content attribute:

• width=device-width: This sets the width of the layout viewport to match the screen width of the device in CSS pixels. This ensures the page content reflows naturally to fit the screen.
• initial-scale=1.0: This sets the initial zoom level when the page is first loaded. A value of 1.0 prevents the browser from initially zooming in or out, displaying the page at its intended size.

Without this tag, mobile browsers typically render the page on a wider virtual viewport (e.g., 980px) and then shrink it down, leading to the problems described earlier. With the tag, the browser uses the actual device width as the layout viewport.

Adding this simple line is crucial for any modern, responsive website.

Further Reading: Learn more about the viewport meta tag on MDN Web Docs.