Meta and link in HTML5 mobile development and html5 mobile metalink

Meta and link in HTML5 mobile development and html5 mobile metalink
Meta

Some webkit exclusive header tags in HTML5 mobile development can help browsers better parse HTML code and provide better front-end performance and experience for HTML5 mobile development.

 

Viewport webpage Scaling

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />

UTF-8 Coding

<meta charset="utf-8" />

SEO search engine settings

<! -- Author --> <meta name = "author" contect = "..."/> <! -- Keywords --> <meta name = "keywords" content = "..."/> <! -- Description --> <meta name = "description" content = "..."/> <! -- Capture --> <meta name = "robots" content = "..."/>

IOS settings

<! -- Disable automatic identification of phone numbers --> <meta name = "format-detection" content = "telephone = no"/> <! -- Disable automatic email identification --> <meta name = "format-detection" content = "email = no"/>

Safari settings

<! -- Force full screen --> <meta name = "apple-mobile-web-app-capable" content = "yes"/> <! -- Set the status bar color --> <meta name = "apple-mobile-web-app-status-bar-style" content = "black"/> <! -- Set the title to add to the home screen --> <meta name = "apple-mobile-web-app-title" content = "..."/>

UC browser settings

<! -- Force portrait --> <meta name = "screen-orientation" content = "portrait"/> <! -- Force full screen --> <meta name = "full-screen" content = "yes"/> <! -- Application Mode --> <meta name = "browsermode" content = "application"/>

QQ browser settings

<! -- Force portrait --> <meta name = "x5-orientation" content = "portrait"/> <! -- Force full screen --> <meta name = "x5-fullscreen" content = "true"/> <! -- Application Mode --> <meta name = "x5-page-mode" content = "app"/>

360 browser settings

<! -- Enable the speed mode --> <meta name = "renderer" content = "webkit"/>

WP mobile phone settings

<! -- Disable click highlight effect --> <meta name = "msapplication-tap-highlight" content = "no"/>

Weibo social tag settings

<! -- Display title --> <meta property = "og: title" content = "..."/> <! -- Display description --> <meta property = "og: description" content = "..."/> <! -- Display type --> <meta property = "og: type" content = "..."/> <! -- Display image --> <meta property = "og: image" content = "..."/> <! -- Display link --> <meta property = "og: url" content = "..."/>

 

Link

Make your WebAPP look more like NativeAPP and bring a different user experience

RSS subscription

<link rel="alternate" type="application/rss+xml" href="rss.xml" title="RSS" />

Settings of the home screen icon

<!-- Favicons --><link rel="shortcut icon" type="image/ico" href="../images/favicon.ico" /><!-- Android --><link rel="icon" sizes="196x196" href="../images/icon-196x196.png" /><!-- iPhone、iTouch --><link rel="apple-touch-icon-precomposed" href="../images/icon-57x57.png" /><!-- Retina iPhone、Retina iTouch --><link rel="apple-touch-icon-precomposed" sizes="114x114" href="../images/icon-114x114.png" /><!-- Retina iPad --><link rel="apple-touch-icon-precomposed" sizes="144x144" href="../images/icon-144x144.png" />

IOS startup animation settings

<! -- IPhone, iPod Touch portrait --> <link rel = "apple-touch-startup-image" href = "../images/icon-320x480.png"/> <! -- Retina iPhone, Retina iPod Touch portrait --> <link rel = "apple-touch-startup-image" sizes = "640x960" href = ".. /images/icon-640x960.png "/> <! -- Retina iPhone 5, Retina iPod Touch 5 portrait screen --> <link rel = "apple-touch-startup-image" sizes = "640x1136" href = ".. /images/icon-640x1136.png "/> <! -- IPad portrait --> <link rel = "apple-touch-startup-image" sizes = "768x1004" href = "../images/icon-768x1004.png"/> <! -- IPad Landscape --> <link rel = "apple-touch-startup-image" sizes = "1024x748" href = "../images/icon-1024x748.png"/> <! -- Retina iPad portrait --> <link rel = "apple-touch-startup-image" sizes = "1536x2008" href = ".. /images/icon-1536x2008.png "/> <! -- Retina iPad Landscape --> <link rel = "apple-touch-startup-image" sizes = "2048x1496" href = "../images/icon-2048x1496.png"/>

 

There are still a lot of meta and link settings, which are too unpopular to be listed one by one.