Shulou(Shulou.com)06/01 Report--

This article mainly introduces how to learn meta viewport parameters in the front end of HTML5, which has a certain reference value, and interested friends can refer to it. I hope you will gain a lot after reading this article.

What is viewport? Generally speaking, viewport is the visual area of a user's web page. The viewport on the mobile device is the area on the device's screen that can be used to display our web page. Specifically, it is the part of the browser used to display the web page, but viewport is not limited to the size of the browser's visual area. It may be larger or smaller than the browser's visual area.

The viewport syntax is as follows:

The details of the parameters of viewport are as follows:

Width: controls the size of the viewport. You can specify a value or a special value, such as device-width is the width of the device (in pixels of CSS when scaled to 100%).

Height: corresponding to width, specify the height.

Initial-scale: initial scaling. That is, the initial zoom of the page. This is a floating-point value, which is a multiplier of the page size. For example, if you set the initial zoom to "1. 0", the web page will be rendered at 1:1 at the target density resolution. If you set it to "2.0", the page will be magnified twice as much.

Minimum-scale: the minimum scale to which users are allowed to zoom

Maximum-scale: maximum zoom. That is, the maximum zoom allowed. This is also a floating-point value that indicates the maximum multiplier of the page size compared to the screen size. For example, if you set this value to "2. 0", the page can be magnified up to 2 times larger than target size.

User-scalable: the user adjusts the zoom. That is, whether the user can change the zoom degree of the page. If set to yes, the user is allowed to change it, and vice versa is no. The default value is yes. If you set it to no, both minimum-scale and maximum-scale will be ignored because it is impossible to zoom.

Target-densitydpi: the pixel density of a screen is determined by the screen resolution and is usually defined as the number of dots per inch (dpi). Android supports three types of screen pixel density: low pixel density, medium pixel density, and high pixel density. A low pixel density screen has fewer pixels per inch, while a high pixel density screen has more pixels per inch. The default screen for Android Browser and WebView is medium pixel density.

The value range of target-densitydpi is as follows:

Device-dpi: use the original dpi of the device as the target dp. Default scaling does not occur.

High-dpi: use hdpi as the target dpi. The devices with medium pixel density and low pixel density are reduced accordingly.

Medium-dpi: use mdpi as the target dpi. The high pixel density device is enlarged accordingly, and the pixel density device is reduced accordingly. This is the default target density.

Low-dpi: use mdpi as the target dpi. The devices with medium pixel density and high pixel density are enlarged accordingly.

Value: specify a specific dpi value as target dpi. This value must be in the range of 70-400.

To prevent Android Browser and WebView from zooming your page according to the pixel density of different screens, you can set viewport's target-densitydpi to device-dpi. When you do this, the page will not zoom. Instead, the page is displayed according to the pixel density of the current screen. In this case, you also need to define the width of the viewport to match the width of the device so that your page can match the screen.

For example:

Set the screen width to the device width, which prevents the user from manually adjusting the zoom:

Set the screen density to high frequency, intermediate frequency, low frequency automatic zoom, forbid the user to manually adjust the zoom:

Thank you for reading this article carefully. I hope the article "how to learn meta viewport parameters in the front end of HTML5" shared by the editor will be helpful to you. At the same time, I also hope you will support us and pay attention to the industry information channel. More related knowledge is waiting for you to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.