HTML5 in viewport and meta-explanation

Online explanation
The mobile browser is to put the page in a virtual "window" (viewport), usually this virtual "window" (viewport) wider than the screen, so that you do not have to squeeze each page into a very small window (this will destroy the layout of the page without the optimization of the mobile browser), Users can view different parts of a Web page by panning and Zooming. The mobile version of Safari has recently introduced the viewport Meta tag, which allows web developers to control the size and scale of viewport, as well as the basic support of other mobile Browsers.

<name   content initial-scale  Maximum-scale=1″>

Attribute Details:

width: Controls the size of the viewport, you can specify a value if 600, or a special value, such as device-width for the width of the device (in pixels of the CSS when scaled to 100%).
height: corresponds to width, specifying HEIGHT.
Initial-scale: The initial zoom ratio, which is the scale at which the page is first Load.
Maximum-scale: Allows the user to zoom to the maximum Scale.
Minimum-scale: The minimum scale to which the user is allowed to Zoom.
user-scalable: Whether the user can zoom manually ( must be disabled )

2, prohibit the number into the phone number (must cancel this):

<name= "format-detection"  content= "telephone=no"/> 

Role: in general, iOS and Android will default to numbers for a certain length, and clicking on this number will automatically dial! Even if not added, it will be displayed by default as a Phone. If the effect is to be turned on, this meta does not have to be written, the default is turned On.

3. Safari private meta tag in iphone device:

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

Function: allow full screen mode to browse, 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.

4, the Iphone's private label:

<Metaname= "apple-mobile-web-app-status-bar-style"content= "default"/><Metaname= "apple-mobile-web-app-status-bar-style"content= "black"/><Metaname= "apple-mobile-web-app-status-bar-style"content= "black-translucent"/>

function: Specifies the status bar display style at the top of the IPHONE. Default (white) to Black (black) and black-translucent (gray Translucent)

5, Create desktop icon and splash screen, Specify its value can make your Web page when saved to the main screen, its icon is displayed as a custom icon, rather than the thumbnail image of the page

<Linkrel= "apple-touch-icon"href= "/custom_icon.png"/><Linkrel= "apple-touch-icon"href= "touch-icon-iphone.png" /><Linkrel= "apple-touch-icon"Sizes= "72x72"href= "touch-icon-ipad.png" /><Linkrel= "apple-touch-icon"Sizes= "114x114"href= "touch-icon-iphone4.png" />

The file name is set to Apple-touch-icon or apple-touch-icon-precomposed, whose named iOS automatically adds rounded, shaded, and highlighted overlays to the icon, which does not add these Effects.

6, to the Web page declaration start screen, similar to the native app. But the declared picture for the iphone and itouch size can only be 460, the other size is not VALID. however, multi-device adaptation can be done with Sizes.

<Linkrel= "apple-touch-startup-image"href= "/startup.png">//for iphone Retina Display high<Linkrel= "apple-touch-startup-image"Sizes= "640x960"href= "img/splash-screen-640x960.png" />//for iPad Landscape<Linkrel= "apple-touch-startup-image"Sizes= "1024x748"href= "img/splash-screen-1024x748.png" />//for iPad Portrait<Linkrel= "apple-touch-startup-image"Sizes= "768x1004"href= "img/splash-screen-768x1004.png" />

Debugging:

in browser debugging + Real Machine testing,

Test tool for Firefox: press Shift+ctrl+m to view it.

HTML5 in viewport and meta-explanation