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

Most people do not understand the knowledge points of this "html5 viewport use case Analysis" article, so the editor summarizes the following content, detailed content, clear steps, and has a certain reference value. I hope you can get something after reading this article. Let's take a look at this "html5 viewport use case Analysis" article.

The code is as follows:

Width

To control 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.

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 following is the range of values for the target-densitydpi property

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.

-specify a specific dpi value as target dpi. The range of this value must be between 70ml 400.

Copy the code

The code is as follows:

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.

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.

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.

All scaling values must be within the range of 0.01mur10.

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, prohibit users from manually adjusting zoom)

The above is about the content of this article "viewport use case Analysis of html5". I believe we all have a certain understanding. I hope the content shared by the editor will be helpful to you. If you want to know more about the relevant knowledge, please follow the industry information channel.

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.