meta

HTML5移动开发中的一些webkit专属头部标签，能够帮助浏览器更好的解析HTML代码，从而为HTML5移动开发提供更好的前端表现与体验

 

viewport网页缩放

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

UTF-8编码

<meta charset="utf-8" />

SEO搜索引擎相关设置

<!-- 作者 --> <meta contect="..." /> <!-- 关键词 --> <meta content="..." /> <!-- 描述 --> <meta content="..." /> <!-- 抓取 --> <meta content="..." />

iOS系统相关设置

<!-- 禁用自动识别电话号码 --> <meta content="telephone=no" /> <!-- 禁用自动识别电子邮件 --> <meta content="email=no" />

Safari浏览器相关设置

<!-- 强制全屏 --> <meta content="yes" /> <!-- 设置状态栏颜色 --> <meta content="black" /> <!-- 设置添加至主屏标题 --> <meta content="..." />

UC浏览器相关设置

<!-- 强制竖屏 --> <meta content="portrait" /> <!-- 强制全屏 --> <meta content="yes" /> <!-- 应用模式 --> <meta content="application" />

QQ浏览器相关设置

<!-- 强制竖屏 --> <meta content="portrait" /> <!-- 强制全屏 --> <meta content="true" /> <!-- 应用模式 --> <meta content="app" />

360浏览器相关设置

<!-- 启用极速模式 --> <meta content="webkit" />

WP手机相关设置

<!-- 禁用点击高光效果 --> <meta content="no" />

Weibo社交标签相关设置

<!-- 展示标题 --> <meta property="og:title" content="..." /> <!-- 展示描述 --> <meta property="og:description" content="..." /> <!-- 展示类型 --> <meta property="og:type" content="..." /> <!-- 展示图片 --> <meta property="og:image" content="..." /> <!-- 展示链接 --> <meta property="og:url" content="..." />

 

link

让你的WebAPP看上去更像NativeAPP，带来不一样的用户体验

RSS订阅

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

主屏图标相关设置

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

iOS启动动画相关设置

<!-- iPhone、iPod Touch竖屏 --> <link href="../images/icon-320x480.png" /> <!-- Retina iPhone、Retina iPod Touch竖屏 --> <link sizes="640x960" href="../images/icon-640x960.png" /> <!-- Retina iPhone 5、Retina iPod Touch 5竖屏 --> <link sizes="640x1136" href="../images/icon-640x1136.png" /> <!-- iPad竖屏 --> <link sizes="768x1004" href="../images/icon-768x1004.png" /> <!-- iPad横屏 --> <link sizes="1024x748" href="../images/icon-1024x748.png" /> <!-- Retina iPad竖屏 --> <link sizes="1536x2008" href="../images/icon-1536x2008.png" /> <!-- Retina iPad横屏 --> <link sizes="2048x1496" href="../images/icon-2048x1496.png" />

 

关于meta与link的设置项其实还有不少，由于太过冷门，就不一一列举了