meta
HTML5移动开发中的一些webkit专属头部标签，能够帮助浏览器更好的解析HTML代码，从而为HTML5移动开发提供更好的前端表现与体验
viewport网页缩放
|
1
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />
|
UTF-8编码
|
1
|
<meta charset="utf-8" />
|
SEO搜索引擎相关设置
|
1
2
3
4
5
6
7
8
|
<!-- 作者 --><meta name="author" contect="..." />
<!-- 关键词 --><meta name="keywords" content="..." />
<!-- 描述 --><meta name="description" content="..." />
<!-- 抓取 --><meta name="robots" content="..." />
|
iOS系统相关设置
|
1
2
3
4
|
<!-- 禁用自动识别电话号码 --><meta name="format-detection" content="telephone=no" />
<!-- 禁用自动识别电子邮件 --><meta name="format-detection" content="email=no" />
|
Safari浏览器相关设置
|
1
2
3
4
5
6
|
<!-- 强制全屏 --><meta name="apple-mobile-web-app-capable" content="yes" />
<!-- 设置状态栏颜色 --><meta name="apple-mobile-web-app-status-bar-style" content="black" />
<!-- 设置添加至主屏标题 --><meta name="apple-mobile-web-app-title" content="..." />
|
UC浏览器相关设置
|
1
2
3
4
5
6
|
<!-- 强制竖屏 --><meta name="screen-orientation" content="portrait" />
<!-- 强制全屏 --><meta name="full-screen" content="yes" />
<!-- 应用模式 --><meta name="browsermode" content="application" />
|
QQ浏览器相关设置
|
1
2
3
4
5
6
|
<!-- 强制竖屏 --><meta name="x5-orientation" content="portrait" />
<!-- 强制全屏 --><meta name="x5-fullscreen" content="true" />
<!-- 应用模式 --><meta name="x5-page-mode" content="app" />
|
360浏览器相关设置
|
1
2
|
<!-- 启用极速模式 --><meta name="renderer" content="webkit" />
|
WP手机相关设置
|
1
2
|
<!-- 禁用点击高光效果 --><meta name="msapplication-tap-highlight" content="no" />
|
Weibo社交标签相关设置
|
1
2
3
4
5
6
7
8
9
10
|
<!-- 展示标题 --><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订阅
|
1
|
<link rel="alternate" type="application/rss+xml" href="rss.xml" title="RSS" />
|
主屏图标相关设置
|
1
2
3
4
5
6
7
8
9
10
|
<!-- 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启动动画相关设置
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
<!-- iPhone、iPod Touch竖屏 --><link rel="apple-touch-startup-image" href="../images/icon-320x480.png" />
<!-- Retina iPhone、Retina iPod Touch竖屏 --><link rel="apple-touch-startup-image" sizes="640x960" href="../images/icon-640x960.png" />
<!-- Retina iPhone 5、Retina iPod Touch 5竖屏 --><link rel="apple-touch-startup-image" sizes="640x1136" href="../images/icon-640x1136.png" />
<!-- iPad竖屏 --><link rel="apple-touch-startup-image" sizes="768x1004" href="../images/icon-768x1004.png" />
<!-- iPad横屏 --><link rel="apple-touch-startup-image" sizes="1024x748" href="../images/icon-1024x748.png" />
<!-- Retina iPad竖屏 --><link rel="apple-touch-startup-image" sizes="1536x2008" href="../images/icon-1536x2008.png" />
<!-- Retina iPad横屏 --><link rel="apple-touch-startup-image" sizes="2048x1496" href="../images/icon-2048x1496.png" />
|