CSS Viewport

CSS Viewport

The viewport is the visible area available for displaying a web page. Understanding the viewport is an important part of responsive web design because CSS layouts can adapt to the space available on different screens and browser windows.

On mobile devices, the viewport meta tag tells the browser how the page should be sized relative to the device, allowing responsive CSS to work as intended.

What is the Viewport?

The viewport is the area of the browser in which a web page is displayed. Its dimensions can change when the browser window is resized, a device is rotated, or the page is viewed on a different device.

A desktop browser may provide a large viewport, while a phone usually provides a much narrower viewport. Responsive layouts use CSS to adapt to these differences rather than assuming that every visitor has the same amount of screen space.

The viewport is not necessarily the same as the device's physical screen size. Browser interface elements, zooming, device pixel density, and other factors can affect how the page is presented.

The Viewport Meta Tag

Responsive pages normally include a viewport meta tag in the document's <head>.

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

This tells mobile browsers to use the device's viewport width as the basis for laying out the page and to begin at the normal initial zoom level.

Without an appropriate viewport setting, some mobile browsers may use a wider virtual layout viewport and then scale the page down, making responsive layouts appear much smaller than intended.

width=device-width

The width=device-width setting tells the browser to make the viewport width correspond to the device's CSS pixel width.

<meta name="viewport" content="width=device-width">

This gives responsive CSS a viewport that reflects the available device width instead of a larger virtual page width commonly used for non-responsive desktop-oriented pages.

Media queries, percentages, flexible layouts, and responsive images can then respond to the available CSS viewport width.

initial-scale=1.0

The initial-scale=1.0 setting establishes the initial zoom scale when the page first loads.

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

A value of 1.0 establishes a 1:1 relationship between CSS pixels and viewport CSS pixels at the initial scale.

Responsive pages should generally allow visitors to zoom when needed. Avoid viewport settings such as user-scalable=no or restrictive maximum scale values that can interfere with accessibility.

Viewport and Responsive Design

The viewport provides the available space that responsive CSS responds to. Flexible widths, media queries, responsive images, and other techniques can use that space to adjust the layout.

.content {
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
}

This container uses 90 percent of its containing block while preventing the content from becoming wider than 1200 pixels.

As the viewport becomes narrower, the containing space also becomes narrower and the layout can shrink with it.

Viewport Units

CSS provides units that can size elements relative to viewport dimensions.

.hero {
  min-height: 50vh;
}

This gives the element a minimum height equal to half of the viewport height.

Modern CSS also provides small, large, and dynamic viewport variants such as svh, lvh, and dvh. These are especially useful on mobile devices where browser interface controls can change the visible viewport height.

Mobile Viewports

Mobile browsers have additional viewport behavior because browser controls such as address bars and toolbars can appear, disappear, or change size while the visitor scrolls.

This is particularly important for layouts based on viewport height. A section sized with 100vh may not always correspond exactly to the currently visible area when mobile browser controls are changing.

Modern viewport units provide additional choices for these situations. For example, 100dvh follows the dynamic viewport height as the visible browser area changes.

.full-screen-section {
  min-height: 100dvh;
}

Avoid Fixed-Width Layouts

A layout that requires a large fixed width can overflow a narrow viewport and force horizontal scrolling.

.content {
  width: 1200px;
}

For responsive layouts, flexible sizing is usually more appropriate.

.content {
  width: 100%;
  max-width: 1200px;
}

The element can now shrink when less space is available while still being limited to a maximum width on larger screens.

Fixed dimensions are not inherently wrong. They are useful for many individual components, but the overall layout should account for smaller viewports when the page is intended to be responsive.

Testing Different Viewport Sizes

Responsive layouts should be tested at many viewport widths rather than only at a few specific device sizes.

You can resize a desktop browser window and use the responsive design tools built into modern browsers to examine how a page behaves at different widths and heights.

Look for horizontal overflow, text that becomes difficult to read, images that extend outside their containers, controls that become crowded, and layout changes that occur at inappropriate widths.

Viewport Example

The following example uses a flexible width and a maximum width to create a container that adapts to the available space.

.responsive-container {
  width: 90%;
  max-width: 700px;
  margin: 0 auto;
}

The HTML document also includes the standard viewport meta tag.

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

Open the example in the editor and change the container width or maximum width. Drag the divider between the code and result panes to change the preview width and see how the layout responds to the available viewport.