Viewport use of mobile website development HTML5

HTML5 's viewport allows us to develop the application or the page size can be suitable for a variety of mobile phone resolution, different screen size. Viewport Syntax Introduction:

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

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 a CSS scaled to 100%).

Height

Specifies the height of the height device.

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 kinds of screen pixel density: low pixel density, medium pixel density, high pixel density. A low pixel density screen has fewer pixels per inch, and a high pixel density screen has more pixels per inch. The Android browser and webview default screens are medium pixel densities.

The following is the range of values for the Target-densitydpi property

Device-dpi– uses the device's original DPI as the target DP. Default scaling does not occur.

high-dpi– uses hdpi as the target dpi. Medium pixel density and low pixel density devices shrink accordingly.

medium-dpi– uses MDPI as the target dpi. The high pixel density device zooms in and the pixel density device shrinks accordingly, which is the default target density.

LOW-DPI-Uses mdpi as the target dpi. Medium pixel density and high pixel density devices are amplified accordingly.

Specifies a specific DPI value as the target dpi. The range of this value must be between 70–400.

To prevent the Android browser and WebView from scaling your page based on the pixel density of different screens, you can set the viewport target-densitydpi to 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 width of the viewport to match the width of the device, so that your page can be adapted to the screen.

Initial-scale

Initial scaling. That is, the initial zoom level of the page. This is a floating-point value and is a multiplier of the page size. For example, if you set the initial scaling to "1.0", then the Web page will show up at 1:1 of target density resolution. If you set it to "2.0", the page will be magnified to twice times.

Maximum-scale

Maximum zoom. The maximum amount of zoom allowed. This is also a floating-point value that indicates the maximum multiplier for the page size compared to the screen size. For example, if you set this value to "2.0", the page can be up to twice times larger than target size.

User-scalable

The user adjusts the zoom. That is, whether the user can change the degree of page scaling. If set to Yes, the user is allowed to change it, otherwise no. The default value is yes. If you set it to No, then both Minimum-scale and Maximum-scale will be ignored because it is impossible to scale at all.

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

Cases:

(Set screen width to device width, prevent user from adjusting zoom manually)

(Set the screen density for high-frequency, if, low-frequency automatic scaling, prevent users to manually adjust the zoom)

initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, User-scalable=no "/>

Note : For more wonderful tutorials, please pay attention to the Triple graphics tutorial channel,