Example of html5 viewport usage

Comments: With the prevalence of high-end mobile phones (such as Android, Iphone, Ipod, and WinPhone), mobile Internet application development has become increasingly popular. html5 is the best choice for mobile app development. However, each mobile phone has different resolutions and screen sizes. How can we make the developed applications or page sizes suitable for various high-end mobile phones? Learn html5 viewport

Viewport syntaxIntroduction:

The Code is as follows:
<! -Html document->
<Meta name = "viewport"
Content ="
Height = [pixel_value | device-height],
Width = [pixel_value | device-width],
Initial-scale = float_value,
Minimum-scale = float_value,
Maximum-scale = float_value,
User-scalable = [yes | no],
Target-densitydpi = [dpi_value | device-dpi | high-dpi | medium-dpi | low-dpi]
"
/>

Parameter description:

Width
-- Controls the viewport size. You can specify a value or a special value. For example, if device-width is the width of the device, the unit is the CSS pixel when the unit is scaled to 100% ).

Height
-- Corresponds to width and specifies the height.

Target-densitydpi
-- The pixel density of a screen is determined by the screen resolution, which 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 screen with a low pixel density has fewer pixels per inch, while a screen with a high pixel density has more pixels per inch. By default, the Android Browser and WebView screens are of medium pixel density.

The following is the value range of the target-densitydpi attribute.
Device-dpi: uses the original dpi of the device as the target dp. No Default scaling occurs.
High-dpi: Uses hdpi as the target dpi. Devices with medium pixel density and low pixel density are reduced accordingly.
Medium-dpi: Use mdpi as the target dpi. Devices with high pixel density are scaled up, while devices with high pixel density are scaled down. This is the default target density.
Low-dpi: Use mdpi as the target dpi. Devices with medium and high pixel density are scaled up accordingly.
<Value>: specify a specific dpi value as the target dpi. The value range must be between 70.

The Code is as follows:
<! -Html document->
<Meta name = "viewport" content = "target-densitydpi = device-dpi"/>
<Meta name = "viewport" content = "target-densitydpi = high-dpi"/>
<Meta name = "viewport" content = "target-densitydpi = medium-dpi"/>
<Meta name = "viewport" content = "target-densitydpi = low-dpi"/>
<Meta name = "viewport" content = "target-densitydpi = 200"/>

To prevent the Android Browser and WebView from scaling your page based on the pixel density of different screens, you can set the target-densitydpi of viewport to device-dpi. When you do this, the page will not be scaled. On the contrary, the page is displayed based on 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 adapt to the screen.

Initial-scale
-- Initial scaling. That is, the initial Page scaling degree. This is a floating point value and a multiplier of the page size. For example, if you set the initial scale to 1.0, the web page will be displayed at of the target density resolution. If you set it to "2.0", the page will be enlarged to 2 times.

Maximum-scale
-- Maximum scaling. That is, the maximum scale allowed. This is also a floating point value that specifies the maximum multiplier between the page size and the screen size. For example, if you set this value to "2.0", the page can be up to two times larger than the target size.

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

All zooming values must be within the range of 0.01-10.

Example: 1. Set the screen width to the device width and disable manual scaling.

The Code is as follows:
<Meta name = "viewport" content = "width = device-width, user-scalable = no"/>

2. Set the screen density to high-frequency, medium-frequency, and low-frequency auto scaling. manual scaling is prohibited.

The Code is as follows:
<Meta name = "viewport" content = "width = device-width, target-densitydpi = high-dpi, initial-scale = 1.0, minimum-scale = 1.0, maximum-scale = 1.0, user-scalable = no "/>