Use of viewport in html5 Development

Comments: Developing mobile apps with html5 is the best choice. 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?

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? Learning how to use html5 viewport can help you do this ......
Viewport Syntax:

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]
"
/>

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 pixel of CSS 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. It 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-use 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
You can adjust 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:

(Set the screen width to the device width, and disable manual scaling)

<Meta name = "viewport" content = "width = device-width, user-scalable = no"/>

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

<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 "/>