Mobile Web page Development Common header tag settings

In the Mobile Web page development, we often need to set up a variety of head tags to help the browser to better parse the page, the page perfectly presented, here is a list of common work in the header tags, in case of query.

Viewport

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">

The Initial-scale property controls the zoom level when the page is initially loaded. The Maximum-scale, Minimum-scale, and user-scalable attribute controls allow the user to zoom in or out of the page in any way.

Purpose of Use: Block page zoom

Safari is invalid, others can prevent page zoom
Safari can use the following methods

window.onload = function(){  Document.AddEventListener(' Touchstart ', function(event){    if(Event.touches.length > 1){//multi-contact      Event.Preventdefault();//block default zoom    }  })varLasttouchend= 0;  Document.AddEventListener(' Touchend ', function(event){    varNow=(New Date()).GetTime();    if(now-Lasttouchend<=  -){      Event.Preventdefault(); //Block double-click to enlarge    }Lasttouchend=Now;  }, false)}

iOS meta

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

Enable WEBAPP full screen mode to remove Apple's default toolbar and menu bar

<meta name="apple-mobile-web-app-title" content="标题">

Set the title after adding to the home screen

<meta name="apple-mobile-web-app-status-bar-style" content="black"/>

The color of the status bar (top bar of the screen) in the Web App app, default (white) Black (black) black-translucent (gray translucent)
A value of "black-translucent" will occupy the page position (will overwrite the page 20px height –iphone4 and itouch4 Retina screen is 40px).

<meta name="format-detection" content="telphone=no, email=no"/>

Ignore the number on the page to identify as the phone, ignoring email identification

IOS Add to Home screen icon

<link rel="apple-touch-icon" href="apple-touch-icon.png">

iOS7 previously the system will add special effects (fillets and highlights) to the icon, if you do not want the system to add effects, you can use apple-touch-icon-precomposed.png instead of apple-touch-icon.png

<link rel="apple-touch-icon-precomposed" href="apple-touch-icon-57x57-precomposed.png"/>

IPhone and ITouch, default 57x57 pixels, must have

<link rel="apple-touch-icon-precomposed" href="apple-touch-icon-114x114-precomposed.png"/>

Retina IPhone and retina itouch,114x114 pixels, can not, but recommended to have

The icons use the following priority levels:

• If you do not have an icon that corresponds to the recommended size of the device, you will prefer an icon that is larger than the recommended size but closest to the recommended size.
• If there is no icon larger than the recommended size, the icon closest to the recommended size is preferred.

IOS splash Screen

Iphone

<link rel="apple-touch-startup-image" media="(device-width: 320px)" href="apple-touch-startup-image-320x460.png"   

IPhone Retina

IPhone 5

IPad portrait

IPad Landscape

IPad Retina Portrait

IPad Retina Landscape

<link href="apple-touch-startup-image-1496x2048.png"media="(device-width: 1536px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2)"rel="apple-touch-startup-image" />

Other

<link rel="dns-prefetch" href="//api.m.taobao.com">

DNS Pre-parsing

<link rel="shortcut icon" type="image/ico" href="/favicon.ico"/>

Add Favicon icon

<meta name="renderer" content="webkit">

Enable 360 browser's fast mode (WebKit)

<meta http-equiv="X-UA-Compatible" content="IE=edge">

IE uses the highest available version

<meta http-equiv="Cache-Control" content="no-siteapp" />

Don't let Baidu Transcode

<meta name="x5-orientation" content="portrait">

QQ Forced vertical Screen

<meta name="x5-fullscreen" content="true">

QQ Mandatory Fullscreen

<meta name="x5-page-mode" content="app">

QQ Application Mode

<meta name="screen-orientation" content="portrait">

UC Force vertical screen

<meta name="full-screen" content="yes">

UC Force full Screen

<meta name="browsermode" content="application">

UC Application Mode

<meta name="msapplication-tap-highlight" content="no">

Windows Phone clicks No highlight

<meta name="robots" content="index,follow"/>

Search Engine Crawl
Description
Robots is used to tell the search robot which pages need to be indexed and which pages do not.
The specific parameters are as follows:
The information parameter is all: The file will be retrieved and the link on the page can be queried;
The information parameter is none: The file will not be retrieved, and the link on the page can not be queried;
The information parameter is index: The file will be retrieved;
The information parameter is follow: the link on the page can be queried;
The information parameter is NOINDEX: The file will not be retrieved, but the link on the page can be queried;
The information parameter is nofollow: The file will be retrieved, but the link on the page can not be queried;

Reference articles

HTML Meta tag Summary, HTML5 Head meta attribute collation
Safari Web Content Guide
Safari HTML Reference

Mobile Web page Development Common header tag settings