Meta and link in HTML5 mobile development and html5 mobile metalink

Source: Internet
Author: User
Tags 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.

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.