Mobile front-end development to add some WebKit-specific HTML5 header tags, help the browser to better parse the HTML code, better to the mobile Web front-end page display. This article organizes some of the commonly used meta tags

<! DOCTYPE html> <!--using HTML5 DOCTYPE, case-sensitive
<!--declaring a document with a character encoding--
<meta charset= ' Utf-8 ' >
<!--prefer to use the latest version of IE and Chrome--
<meta http-equiv= "x-ua-compatible" content= "ie=edge,chrome=1"/>
<!--page description--
<meta name= "description" content= "no more than 150 characters"/>
<!--page keywords--
<meta name= "keywords" content= ""/>
<!--page author--
<meta name= "Author" content= "name, [email protected]"/>
<!--search Engine crawl--
<meta name= "Robots" content= "Index,follow"/>
<!--add viewport to your mobile device
<meta name= "viewport" content= "initial-scale=1, maximum-scale=3, minimum-scale=1, User-scalable=no" >
<!--' Width=device-width ' will cause the IPhone 5 to be added to the main screen after the WEBAPP full screen mode to open the page when the black edge Http://bigc.at/ios-webapp-viewport-meta.orz-- >
 
<!--IOS devices Begin--
<meta name= "Apple-mobile-web-app-title" content= "title" >
<!--title added to the home screen (IOS 6 new)-
<meta name= "apple-mobile-web-app-capable" content= "yes"/>
<!--whether to enable WEBAPP full screen mode, remove Apple's default toolbar and menu bar--
 
<meta name= "Apple-itunes-app" content= "App-id=myappstoreid, Affiliate-data=myaffiliatedata, App-argument=myURL" >
<!--add Smart App ad strip Smart app Banner (IOS 6+ Safari)--
<meta name= "Apple-mobile-web-app-status-bar-style" content= "Black"/>
<!--set the Apple toolbar color--
<meta name= "format-detection" content= "Telphone=no, Email=no"/>
<!--ignore the numbers in the page to recognize the phone, ignoring email identification
<!--fast mode with 360 browser enabled (WebKit)--
<meta name= "renderer" content= "WebKit" >
<!--prevent IE from using compatibility mode--
<meta http-equiv= "x-ua-compatible" content= "Ie=edge" >
<!--don't let Baidu transcode--
<meta http-equiv= "Cache-control" content= "No-siteapp"/>
<!--optimized for handheld devices, mainly for older browsers that do not recognize viewport, such as BlackBerry--and
<meta name= "handheldfriendly" content= "true" >
<!--Microsoft's Vintage browser--
<meta name= "mobileoptimized" content= ">"
<!--UC Force vertical screen--
<meta name= "Screen-orientation" content= "Portrait" >
<!--QQ Forced vertical screen--
<meta name= "X5-orientation" content= "Portrait" >
<!--UC Mandatory fullscreen--
<meta name= "Full-screen" content= "yes" >
<!--QQ Mandatory fullscreen--
<meta name= "X5-fullscreen" content= "true" >
<!--UC Application Mode--
<meta name= "Browsermode" content= "Application" >
<!--QQ Application Mode--
<meta name= "X5-page-mode" content= "App" >
<!--windows Phone Click No Highlight--
<meta name= "Msapplication-tap-highlight" content= "no" >
<!--IOS icons Begin--
<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" sizes= "114x114" href= "/apple-touch-icon-114x114-precomposed.png"/>
<!--Retina IPhone and retina itouch,114x114 pixels, can be no but recommended--
<link rel= "apple-touch-icon-precomposed" sizes= "144x144" href= "/apple-touch-icon-144x144-precomposed.png"/>
<!--Retina ipad,144x144 pixels, yes No but recommended-
<!--IOS Icon End--
 
<!--IOS splash screen Begin--
<link rel= "Apple-touch-startup-image" sizes= "768x1004" href= "/splash-screen-768x1004.png"/>
<!--iPad Vertical screen 768 x 1004 (standard resolution)--
<link rel= "Apple-touch-startup-image" sizes= "1536x2008" href= "/splash-screen-1536x2008.png"/>
<!--iPad vertical screen 1536x2008 (Retina)--
<link rel= "Apple-touch-startup-image" sizes= "1024x748" href= "/default-portrait-1024x748.png"/>
<!--iPad Horizontal screen 1024x748 (standard resolution)--
<link rel= "Apple-touch-startup-image" sizes= "2048x1496" href= "/splash-screen-2048x1496.png"/>
<!--IPad flat screen 2048x1496 (Retina)--
 
<link rel= "Apple-touch-startup-image" href= "/splash-screen-320x480.png"/>
<!--iphone/ipod Touch vertical screen 320x480 (standard resolution)--
<link rel= "Apple-touch-startup-image" sizes= "640x960" href= "/splash-screen-640x960.png"/>
<!--iphone/ipod Touch vertical screen 640x960 (Retina)--
<link rel= "Apple-touch-startup-image" sizes= "640x1136" href= "/splash-screen-640x1136.png"/>
<!--iPhone 5/ipod Touch 5 Vertical screen 640x1136 (Retina)--
<!--IOS splash screen End--
 
<!--IOS Device End--
<meta name= "Msapplication-tilecolor" content= "#000"/>
<!--Windows 8 tile Color--
<meta name= "Msapplication-tileimage" content= "Icon.png"/>
<!--a Windows 8 tile icon--
 
<link rel= "Alternate" type= "Application/rss+xml" title= "RSS" href= "/rss.xml"/>
<!--add RSS subscriptions--
<link rel= "shortcut icon" type= "Image/ico" href= "/favicon.ico"/>
<!--Add Favicon icon--

<!--SNS Social tags begin--
<!--reference micro-blog API--
<meta property= "Og:type" content= "type"/>
<meta property= "Og:url" content= "url address"/>
<meta property= "Og:title" content= "title"/>
<meta property= "Og:image" content= "Picture"/>
<meta property= "og:description" content= "description"/>
<!--SNS Social tags end--
 
<title> title </title>
This article by the front-end development blog All rights reserved
Original link (http://caibaojian.com/mobile-meta.html)
Mobile front-end development to add some WebKit-specific HTML5 header tags, help the browser to better parse the HTML code, better to the mobile Web front-end page display. This article organizes some of the commonly used meta tags