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

Editor to share with you how to use viewport for screen adaptation in html5 development, I believe most people do not know much about it, so share this article for your reference. I hope you will learn a lot after reading this article. Let's learn about it together.

Introduction to viewport syntax:

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. This value must be in the range of 70-400.

1 2 3 4 5 6

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 in the range of 0.01-10.

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)

These are all the contents of the article "how to use viewport for screen adaptation in html5 Development". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to 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.