How To Use CSS Viewport

Today, devices come in all shapes and sizes. Users access web pages with screen sizes ranging from large desktop monitors to compact smartphones. Given this diversity, how can a web page display consistently across different-sized screens?

The answer is the viewport, and how you use it to create web pages with a responsive design. In this article, we’ll discuss how the viewport works. Then, we’ll explore how you can access and use the viewport in CSS to ensure a consistent and responsive experience for every visitor on your site.

What is a viewport?

The viewport is the area of a web page that’s visible to the user. The viewport is fundamental to web development, since its dimensions are what control how page elements appear.

The viewport is a rectangle, the size of which is determined by the size of the user’s device. On a desktop device, the viewport size matches the browser’s window size, excluding the toolbar and other elements that aren’t part of the page. On a mobile device, the viewport is generally the size of the device’s screen.

There are two kinds of viewport: the layout viewport and the visual viewport.

• The layout viewport refers to the dimensions of the page that the browser uses to determine how to display the page.
• The visual viewport is a potentially smaller space, which accounts for the fact that some browser features, like on-screen keyboards and pinch-zoom events, limit the page’s visibility but do not shift the page layout. The visual viewport is most relevant on mobile devices, where these browser events are most common.

Importantly, both of these viewports are mutable, meaning their dimensions can change after loading the page.

For instance, on a desktop, a user can change the size of their browser window, causing the layout of the page to shift to match the new dimensions. On mobile, a user may alter the layout viewport by rotating their device. Additionally, the visual viewport may change if an on-screen keyboard appears, reducing the view of the page to the area outside of the keyboard.

Web developers are mainly concerned with the layout viewport. Because CSS styles are relative to the dimensions of the layout viewport, the layout viewport ultimately determines how the page appears to the user. This article will primarily discuss the layout viewport, but note that the visual viewport is accessible to developers through the visual viewport JavaScript API.

Because the layout viewport may change at any time, the web page should be able to responsively adapt to these changes to ensure that content always appears appropriately to the user. For example, it would be poor web page design if rotating the screen caused some content to become difficult or impossible for the user to see or interact with.

Next, let’s discuss how you can use the viewport and CSS to achieve a functional, user-friendly web page design.

Responsive Viewports in CSS

Responsive design helps you account for the unpredictability of the user’s screen size. It’s a modern pillar of web design that centers on creating a consistent user experience across devices.

In the past, it was okay for websites to only design for desktop users. Today, however, every website should adjust organically to the user’s screen size. Users expect that when a page opens on their small mobile device, the content is appropriately sized, all text is easy to read, and pages are easy to navigate.

Accessing the viewport’s size in the page’s styling is crucial to implementing this kind of responsive design, and the main method you can use to accomplish this is with media queries. Specifically, you’ll use the @media CSS rule. Any styling under an appropriate @media rule only applies to screens that fit certain dimensions.

Consider the following example. Suppose you want to increase the font size of your website’s paragraphs when they appear on smaller devices. One way to accomplish this is to add the following CSS to the page:

Let’s break this code down. First, you initially declare the font size for text inside paragraphs to be 12 pixels. Below that, the @media rule applies styling selectively based on the width of the user’s viewport.

The first part of the @media rule is the media type, which tells the browser which kinds of pages to apply the special styling to. In this example, you choose screen for any normal device’s screen. Other options include print, which is used by printers, and speech, which is used by screen readers.

In the second part of the rule (max-width: 500px), you declare that the styling should only apply to a screen with a maximum width of 500 pixels, which is a relatively small value. However, if you wanted to target even smaller devices with the styling, you could lower that max-width value.

Finally, you place your alternative styling within the body of the @media rule. In this case, you declare that text within paragraph tags should have a font size of 14 pixels. If applicable to the user’s viewport, this rule overrides the previously declared value because of the cascading nature of CSS.

This example is relatively simple, but there are even easier ways to accomplish dynamic font size scaling in CSS, such as using a rem dynamic unit instead of an absolute unit like px. In practice, however, you can use @media rules to make large adjustments to the styling of the page to achieve a responsive design.

Let’s look at another example: A mobile device has a narrow screen, so you can use @media rules to adjust the styling of the page to better use the available vertical space on the device, rather than horizontal space.

Say you have a group of cards displaying some information on your page that looks like this:

The cards display nicely on a wide desktop screen, but on a mobile device there’s not enough room to display all three cards in a row. To fix this, you can make it so the cards are arranged in a column on smaller screens.

Suppose you have the following HTML markup for three cards:

The card-container is a flexbox with the following styling used to center the cards placed within it:

To arrange the items in a column on small screens, you can add a single @media rule to change the CSS of the card-container:

Here, the single line flex-direction: column updates the CSS in the way you want for screens with a max-width of 350 pixels. With this change, on a small screen, the cards now look like this:

Using @media rules enables you to target the user’s viewport, as it allows you to ensure the styling of the page is dynamic and responsive.

A Note on @viewport

You may be familiar with another CSS rule, @viewport, which many developers have used to adjust the dimensions of a user’s initial viewport. However, this functionality is now deprecated.

Today, @viewport is only available in the legacy browser Internet Explorer, which Microsoft officially dropped support for in June 2022. So, you should avoid the @viewport rule entirely in any future CSS code.

Use viewports to make your pages responsive.

The viewport is an important browser concept that determines which portions of the page are visible and how to lay out content. Specializing a page’s styling according to the viewport is an important technique for achieving a responsive design.

In the last few decades, the emergence of the smartphone as the primary way people access the Internet has forced web designers to adapt. Users expect a consistent experience regardless of the size of their device.

So, when you’re developing web pages, pay close attention to the viewport to ensure your site meets these expectations across all devices.