When we browse the web on mobile phones or tablets, have you ever found that some web pages fit well on the screen, while others require swiping left or right to fully display the content? This involves a magical thing - the Viewport Meta tag.
Recently, I have been studying various implementation methods of self-adaptation, such as media media query, adaptive layout, etc. One of the most common ones that everyone often uses by default is the Viewport Meta tag.
What is a Viewport?
Viewport simply means the area you can see on the screen. In desktop browsers, this is usually the entire browser window, but on mobile devices, the situation is more complicated. Because mobile devices have different screen sizes, the Viewport Meta tag is especially important.
What is the Viewport Meta tag?
The Viewport Meta tag is anHTML tag that tells the browser how to set the viewport of a web page. By adding code similar to the following to the head of the HTML document:
<meta name="viewport" content="width=device-width, initial-scale=1.0">This code tells the browser that the width of the web page should be equal to the width of the device and that the initial scaling should be 1.0. This helps ensure that web pages display well on different devices.
We can also set other properties to define the size and zoom level rules for the browser to render the page.
For the content and meaning of specific attributes, please refer to the document:viewport meta tag - HTML (Hypertext Markup Language) | MDN (mozilla.org)
Why do I need the Viewport Meta tag?
1. Responsive design: The screen sizes of mobile devices are various. The Viewport Meta tag can help the web page automatically adjust the layout to adapt to different screen sizes, so that users can use Both large-screen mobile phones and small-screen tablets can have a good browsing experience.
2. Disable zoom: Some web pages hope that users cannot change the page layout through gesture zoom. The Viewport Meta tag can help web developers control this behavior.
That is, set the attribute: user-scalable: no or 0.
3. Mobile device optimization: By setting Viewport, web pages can better utilize the screen space of mobile devices and provide a more friendly user interface.
How to use Viewport Meta tag?
Just add the following code to the `<head>` tag of the HTML document:
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 其他头部信息 -->
</head>By setting different property values, you can adjust the behavior of the Viewport to meet the needs of your web page.
Of course, in the vue3 development framework, we only need to add the meta tag to the root html to implement the global Viewport Meta tag.
After adding it, open the browser developer tools and switch the window type, you can see the significant effect.