The role of meta viewport

When we adapt the page to mobile devices, we often see the following codes in our HTML file.

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

So what does this meta tag named viewport do. Before talking about viewport, let’s take a look at what the <meta> tag in HTML is for:

Meta elements are tags used in HTML and XHTML documents to provide structured metadata about a Web page.

Its basic properties are as follows

charsetcharacter_setSpecifies the character encoding for the HTML document
contenttextSpecifies the value associated with the http-equiv or name attribute
Provides an HTTP header for the information/value of the content attribute
Specifies a name for the metadata
This table is copied from w3schools

After understanding the basic functions of meta, we now look at the role of viewport meta and what problems it can solve.

In the past, web pages were mainly used for display on PCs, so developers did not need to think too much about mobile-display issues, but with the rise of mobile phone, more and more people are accessing the Web via mobile devices. As we know the viewport on the PC is larger than the mobile which means the page that was previously displayed normally on the PC cannot be displayed normally on the mobile phone. In order to solve this issue, the browser can only shrink the entire page proportionally, which results that the fonts and pictures in our screen look very small. What’s more, the viewport on the PC screen is horizontal while the mobile screen is vertical. When after the user zooms in the webpage, there will be a horizontal scroll bar and this issue makes the user experience quite bad.

To fix this issue, the viewport meta tag was first introduced by Apple in Safari iOS, allowing web developers to control the size and proportion of the viewport.

Now let’s go back and look at the line of code at the beginning of the article,:

widthThe width of the viewport
width=device-width: the width of the screen measured in CSS pixels when the zoom is 100%
initial-scaleInitialize zoom ratioinitial-scale=1.0: initialize without scaling
maximum-scaleMaximum scalabilitymaximum-scale=1.0: prohibit user zoom

Help this article is useful to you.