"Reprint • Collection" HTML5 mobile website Adaptive need to add META tags

WebApp development in the early days, will encounter the PC-side development of the page in the mobile display too big problem, here need to add META tags in the HTML head to control the zoom

<meta name= "viewport" content= "Width=device-width   initial-scale=1.0  minimum-scale=1.0  miximum=1.0  User-scalable=yes "/>

Here are specific instructions for this tag:

Viewport Syntax Introduction:

<meta name= "Viewport"
The content contains several properties:
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
Width represents the layout of the Web page, and controls the size of the viewport, a value that can be specified (the default unit px), or a special value, such as:
width=960, initial-scale=0.33 (960 is the width of the page layout, where width means to reduce the other to about 1/3, so that you can see the entire page on a 320-megapixel mobile device)

Or
Width=device-width ( width of the device, general wording )

Height
Same as width usage, specify 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, 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

The 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. Medium pixel density and low pixel density devices are scaled down accordingly.
medium-dpi– uses MDPI as the target dpi. High pixel density devices are scaled accordingly, and pixel density devices are scaled down accordingly. This is the default target density.
LOW-DPI-use MDPI as the target dpi. Medium pixel density and high pixel density devices are scaled accordingly.
<value>– specifies a specific DPI value as the target dpi. The range of this value must be between 70–400.
1 <!--HTML Document--
2 <meta name= "viewport" content= "target-densitydpi=device-dpi"/>
3 <meta name= "viewport" content= "target-densitydpi=high-dpi"/>
4 <meta name= "viewport" content= "target-densitydpi=medium-dpi"/>
5 <meta name= "viewport" content= "target-densitydpi=low-dpi"/>
6 <meta name= "viewport" content= "target-densitydpi=200"/>

To prevent 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 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 will fit on the screen.

Initial-scale
Initial scaling. That is, the default initial zoom level when the page opens. 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", then the Web page will show up at 1:1 of the target density resolution. If you set it to "2.0", the page will be enlarged to twice times.

Maximum-scale
Maximum zoom. That is, the maximum allowable zoom level. 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 up to twice times larger than the target size.

Minimum-scale

Minimum scale, same as Maximum-scale

User-scalable
The user adjusts the zoom. That is, whether the user can change the page zoom level. If set to Yes, the user is allowed to change it instead of No. The default value is yes. If you set it to No, then both Minimum-scale and Maximum-scale will be ignored because scaling is not possible at all.

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

additional META tags other commonly used attribute usage parsing:

1, <meta name= "Format-detection" the use of/>

When browsing on a phone, this tab is used to specify whether to display the phone number in the page content as a dial-up hyperlink.
The default value on the IPhone is:
<meta name= "format-detection" content= "Telephone=yes"/>
If you don't want your phone to automatically display the phone number in your page as a dial-up hyperlink, you can write:
<meta name= "format-detection" content= "Telephone=no"/>

2.<meta name= the use of "apple-mobile-web-app-capable"/>

<meta name= "apple-mobile-web-app-capable" content= "yes"/>

The Apple-mobile-web-app-capable function is to delete the default Apple toolbar and menu bar . The content has two values "yes" and "no", and when we need to display the toolbar and menu bar, the row meta is not added, the default is display.

3.<meta name= the use of "Apple-mobile-web-app-status-bar-style"/>
The effect is to control the status bar display style:

<meta name= "Apple-mobile-web-app-status-bar-style" content= "Default"/>
<meta name= "Apple-mobile-web-app-status-bar-style" content= "Black"/>
<meta name= "Apple-mobile-web-app-status-bar-style" content= "Black-translucent"/>
Default: Defaults; Black: pure black; black-translucent: Translucent Grey

Original link: http://www.cnblogs.com/Brose/p/webapp_meta.html

"Reprint • Collection" HTML5 mobile website Adaptive need to add META tags