Viewport screen adaptation in html5 development

With the popularity of high-end mobile phones (Andriod, Iphone, Ipod, WinPhone, etc.), mobile Internet application development has attracted more and more attention. Using html5 to develop mobile applications is the best choice. However, each mobile phone has a different resolution and screen size. How can we make the application or page size we develop suitable for various high-end mobile phones? Learning the use of html5 viewport can help you do this...

viewport syntax introduction:

width

To control the size of the viewport, you can specify a value or a special value. For example, device-width is the width of the device (the unit is CSS pixels when scaling to 100%).

height

corresponds to width and specifies the height.

target-densitydpi

A screen pixel density is determined by the screen resolution, usually defined as the number of dots per inch (dpi). Android supports three screen pixel densities: 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. Android Browser and WebView default screens are medium pixel density.

The following is the value range of the target-densitydpi attribute

• 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. Medium pixel density and low pixel density devices scale down accordingly.

• medium-dpi – Use mdpi as the target dpi. Devices with high pixel density scale up accordingly, and devices with pixel density scale down accordingly. This is the default target density.

• low-dpi - Use mdpi as the target dpi. Medium pixel density and high pixel density devices scale up accordingly.

• – Specify a specific dpi value as the 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 scaling your page based on the pixel density of different screens, you can set the viewport's target-densitydpi is device-dpi. When you do this, the page will not scale. Instead, the page is displayed based on the pixel density of the current screen. In this case, you also need to define the viewport's width to match the device's width so that your page can fit on the screen.

initial-scale

Initial scaling. That is, the initial zoom level of the page. This is a floating point value that is a multiplier of the page size. For example, if you set the initial scaling to "1.0", then the web page will be displayed at 1:1 of the target density resolution when displayed. If you set it to "2.0", then the page will be enlarged to 2 times.

maximum-scale

Maximum scaling. That is, the maximum degree of scaling allowed. This is also a floating point value indicating the maximum multiplier of the page size compared to the screen size. For example, if you set this value to "2.0", then the page can be enlarged up to 2 times compared to the target size.

user-scalable

User-adjustable scaling. That is, whether the user can change the zoom level of the page. If set to yes, the user is allowed to change it, otherwise it is no. The default value is yes. If you set it to no, both minimum-scale and maximum-scale will be ignored, since scaling is not possible at all.

All scaling values must be within the range of 0.01–10.

Example:

(Set the screen width to the device width and prohibit the user from manually adjusting the zoom)

(Set the screen density to high frequency, medium frequency, low frequency automatic scaling, prohibit the user from manually adjusting the scaling)

The above is the detailed content of Viewport screen adaptation in html5 development. For more information, please follow other related articles on the PHP Chinese website!