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
|charset||character_set||Specifies the character encoding for the HTML document|
|content||text||Specifies 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|
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,:
|width||The width of the viewport|
width=device-width: the width of the screen measured in CSS pixels when the zoom is 100%
|initial-scale||Initialize zoom ratio||initial-scale=1.0: initialize without scaling|
|maximum-scale||Maximum scalability||maximum-scale=1.0: prohibit user zoom|
Help this article is useful to you.