CSS RWD Viewport

Quiz

A viewport, in the context of responsive web design, is a virtual area used by the browser to render a web page. The viewport is essential to web development and creation of responsive designs that adapt to various devices and screen sizes.

What is a Viewport?

Viewport is the visible area for a user in the web page. It will vary with the device, and will be smaller on a mobile phone than on a computer screen. On a desktop, the viewport is the window's size, excluding the toolbar and other elements that are not the part of the web page. And on a mobile device, it is the size of the screen.

Types of Viewport

There are mainly two types of viewport, which are as follows:

Layout Viewport: It is the virtual area used by the browser to display the web page. The layout viewport is controlled by adding the meta viewport tag in the HTML head section.

Visual Viewport: It represents the part of the layout viewport that is currently visible on the screen. The visual viewport can be changed on zooming in and out.

Both the viewports are mutable, which means, the dimensions of both can be altered after loading of the page.

Setting The Viewport

As mentioned above, we can control viewport width using <meta> tag. You should include the following <meta> viewport element inside head section of all your web pages for ensuring responsiveness.

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

In the above syntax, "content = width=device-width:" Set the width of the viewport same as the width of the device screen. And, "initial-scale = 1.0:" is used to set the initial zoom level to 100%.

In the below section, we provided example of a web page without the viewport meta tag, and the same web page with the viewport meta tag.

Example With Meta Tag

The code below includes the viewport meta tag, which sets the layout viewport width equal to the device's screen width. As a result, the page is responsive and adapts to different screen sizes.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
        }
        .container {
            width: 90%;
            background-color: lightblue;
            padding: 20px;
            text-align: center;
        }
        .content {
            width: 90%;
            margin: auto;
            background-color: lightcoral;
            padding: 10px;
        }
    </style>
</head>

<body>
    <div class="container">
        <h1>Responsive Layout with Viewport Meta Tag</h1>
        <div class="content">
            <p>
                This layout adapts to the device screen width, 
                thanks to the viewport meta tag.
            </p>
        </div>
    </div>
</body>

</html>

Example Without Viewport Meta Tag

The code below does not include viewport meta tag, as a result the entire viewport will not be visible in smaller screens. A horizontally scroll option will appear on smaller screen reducing user experience.

<!DOCTYPE html>
<html lang="en">

<head>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
        }
        .container {
            width: 100%;
            background-color: lightblue;
            padding: 20px;
            text-align: center;
        }
        .content {
            width: 90%;
            margin: auto;
            background-color: lightcoral;
            padding: 10px;
        }
    </style>
</head>

<body>
    <div class="container">
        <h1>Non-Responsive Layout Without Viewport Meta Tag</h1>
        <div class="content">
            <p>   
                This layout does not adapt to the device screen width, 
                because it lacks the viewport meta tag.
            </p>
        </div>
    </div>
</body>

</html>

CSS Units Related to Viewports

In CSS, we can specify dimension of elements relative to viewport dimensions, such as to occupy 50% width of viewport or 100% height viewport. Following are popular units.

vw (viewport width): This unit is based on 1% of the viewport's width. For example, 'width: 10vw' would equal 10% of the viewport's total width.
vh (viewport height): This unit is based on 1% of the viewport's height. For example, 'height: 50vh' would be half the viewport's height.
vmin: This unit takes the smaller value between the viewport's width and height. It's helpful when you want the size to adapt to both portrait and landscape orientations.
vmax: This unit takes the larger value between the viewport's width and height, useful for designs that need to maximize space in larger viewports.

Print Page