Skip to main content

Introduction to Responsive Web Design - The Viewport

What is The Viewport ?​

The viewport is the visible area of a web page that is displayed to the user in their browser. It's the area where the content of the web page is displayed, and users can interact with it.

The viewport can vary in size depending on the device and the browser used to view the web page. For example, a desktop computer may have a much larger viewport than a mobile phone or tablet.

To control the viewport in web design, we use the viewport meta tag, which allows us to set the initial scale, width, and height of the viewport. This meta tag is placed in the head section of the HTML document.

As an example:

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

Example​

Editor

Loading...

In this example:

  • We have a simple HTML document with a head and body section.
  • The head section contains the meta viewport tag, which specifies that the viewport should have a width equal to the device width and an initial scale of 1.0.
  • The initial-scale property sets the initial zoom level of the webpage.
  • A value of 1.0 means the webpage is displayed at the normal size without any zooming in or out.

Setting The Viewport​

Setting the viewport is a way to control the size and scale of a webpage on mobile devices. The viewport is the visible area of a webpage on a device's screen, and setting it correctly can help ensure that the page looks and functions properly on different devices.

As an example:

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

This meta tag specifies two things:

  • width=device-width tells the browser to set the width of the viewport to the width of the device's screen.
  • initial-scale=1.0 sets the initial zoom level of the page to 100%, so it's not zoomed in or out.

Setting the viewport is an important step in creating a responsive design that looks and functions well on mobile devices.

Size Content to The Viewport​

To size content to the viewport means to adjust the size of elements on a webpage or application so that they fit within the visible area of the device's screen, without requiring the user to scroll or zoom in or out. This is important for creating a responsive design that works well on different devices with varying screen sizes.

There are several ways to size content to the viewport, including:

  • Using CSS media queries to adjust the layout and font sizes based on the device's screen size.

  • Using responsive images that automatically adjust their size based on the available space.

  • Using the viewport meta tag to control the initial scale of the page on mobile devices.

  • Using flexible units like percentages or viewport units (vh and vw) instead of fixed pixel sizes for elements like containers and images.

By sizing content to the viewport, you can create a more user-friendly experience that adapts to the device being used, whether it's a desktop computer, tablet, or smartphone.