Articles
Introduction to CSS
Viewport and Responsive Design

Viewport and Responsive Design

This article explains the viewport and responsive design.

You will learn how to set the viewport using the <meta> tag and why it is important.

YouTube Video

HTML for Preview

css-responsive-viewport.html 
 1<!DOCTYPE html>
 2<html lang="en">
 3<head>
 4    <meta charset="UTF-8">
 5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6    <title>CSS Properties Example</title>
 7    <link rel="stylesheet" href="css-base.css">
 8    <link rel="stylesheet" href="css-responsive-viewport.css">
 9</head>
10<body>
11    <!-- Header -->
12    <header>
13        <h1>CSS Properties For Responsive Design</h1>
14    </header>
15
16    <!-- Main content -->
17    <main>
18        <header>
19            <h2>Viewport Properties</h2>
20        </header>
21        <article>
22            <h3>Viewport Example</h3>
23            <section>
24                <header><h4>HTML</h4></header>
25                <pre>&lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;</pre>
26            </section>
27        </article>
28        <article>
29            <h3>width</h3>
30            <section>
31                <header><h4>HTML</h4></header>
32                <pre>&lt;meta name="viewport" content="width=device-width"&gt;</pre>
33            </section>
34        </article>
35        <article>
36            <h3>height</h3>
37            <section>
38                <header><h4>HTML</h4></header>
39                <pre>&lt;meta name="viewport" content="height=device-height"&gt;</pre>
40            </section>
41        </article>
42        <article>
43            <h3>initial-scale</h3>
44            <section>
45                <header><h4>HTML</h4></header>
46                <pre>&lt;meta name="viewport" content="initial-scale=1.0"&gt;</pre>
47            </section>
48        </article>
49        <article>
50            <h3>minimum-scale</h3>
51            <section>
52                <header><h4>HTML</h4></header>
53                <pre>&lt;meta name="viewport" content="minimum-scale=0.5"&gt;</pre>
54            </section>
55        </article>
56        <article>
57            <h3>maximum-scale</h3>
58            <section>
59                <header><h4>HTML</h4></header>
60                <pre>&lt;meta name="viewport" content="maximum-scale=2.0"&gt;</pre>
61            </section>
62        </article>
63        <article>
64            <h3>user-scalable</h3>
65            <section>
66                <header><h4>HTML</h4></header>
67                <pre>&lt;meta name="viewport" content="user-scalable=no"&gt;</pre>
68            </section>
69        </article>
70        <article>
71            <h3>Viewport Common Examples 1</h3>
72            <section>
73                <header><h4>HTML</h4></header>
74                <pre>&lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;</pre>
75            </section>
76        </article>
77        <article>
78            <h3>Viewport Common Examples 2</h3>
79            <section>
80                <header><h4>HTML</h4></header>
81<pre>
82&lt;meta name="viewport"
83      content="width=device-width, initial-scale=1.0, user-scalable=no"&gt;
84</pre>
85            </section>
86        </article>
87        <article>
88            <h3>Viewport Common Examples 3</h3>
89            <section>
90                <header><h4>HTML</h4></header>
91                <pre>&lt;meta name="viewport" content="width=1024, initial-scale=1.0"&gt;</pre>
92            </section>
93        </article>
94    </main>
95</body>
96</html>

About Setting the viewport in HTML

The viewport setting is used to control information about the display area (viewport) of the device displaying the webpage. It plays an important role especially in adjusting the display of web pages on mobile devices.

What is a Viewport?

Viewport refers to the display area of a browser window or device where the user is viewing a web page. On a desktop, the size of the browser window becomes the viewport, while on mobile devices such as smartphones and tablets, the screen size of the device becomes the viewport.

Specifying the Viewport

To control the viewport, you configure the viewport settings using the <meta> tag in HTML. This setting allows you to specify how the page will display on different devices.

Basic Syntax 

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

This code sets the viewport width to match the device's width and the initial display scale (zoom level) of the page to 1.0 (100% display).

Main Properties of viewport

The properties that can mainly be specified with the content attribute of viewport are as follows:.

  1. width

    • Specify the width of the viewport for width. By setting it to device-width, the viewport is adjusted to the device's physical width in pixels.
    • Example: width=device-width

  2. height

    • Specify the height of the viewport for height, although generally only the width is set and the height is not often specified. By setting it to device-height, the viewport matches the device's physical height in pixels.
    • Example: height=device-height

  3. initial-scale

    • Specify the initial zoom level of the page for initial-scale. 1.0 means the device's 100% zoom level.
    • Example: initial-scale=1.0

  4. minimum-scale

    • Specify the minimum scale for zooming out for minimum-scale. By setting it to 0.5, you can zoom out up to 50%.
    • Example: minimum-scale=0.5

  5. maximum-scale

    • Specify the maximum scale for zooming in for maximum-scale. By setting it to 2.0, you can zoom in up to 200%.
    • Example: maximum-scale=2.0

  6. user-scalable

    • Specify whether the user can zoom the page for user-scalable. Specify with yes or no.
    • Example: Setting user-scalable=no disables user zooming.

Commonly Used Examples

  1. Standard Responsive Settings
1<meta name="viewport" content="width=device-width, initial-scale=1.0">
  • This setting automatically adjusts the page to match the screen width of mobile devices and ensures that the page is displayed at a 100% zoom level. It is a fundamental setting for responsive design.
  1. Disable Zoom
1<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
  • This setting disables zooming by the user. It is used when zooming is not necessary for a specific design or when zooming operations may cause design breakage.
  1. Fixed Zoom Levels and Viewport Width
1<meta name="viewport" content="width=1024, initial-scale=1.0">
  • This setting fixes the viewport width at 1024 pixels and sets the zoom level to 100% at the initial display. It is used when you want to keep the page width constant regardless of the device width.

Role of viewport

Setting the viewport is essential for optimizing display, especially on mobile devices. By configuring the viewport correctly, you can prevent issues such as the following:.

  • Prevents the page from exceeding the device's width, which would require scrolling.
  • Prevents text and images from becoming too small to read easily.
  • Prevents the entire page from being zoomed out, making it difficult to interact.

Summary

  • The viewport is used to control the display area of the device displaying the webpage.
  • It is mainly used to accommodate display on mobile devices and plays an important role in responsive design.
  • Settings like width=device-width and initial-scale=1.0 are commonly used in standard responsive web design.

Properly setting the viewport can provide mobile users with a comfortable viewing experience.

You can follow along with the above article using Visual Studio Code on our YouTube channel. Please also check out the YouTube channel.

YouTube Video

Overview of Responsive Design in CSS