meta在移动端的运用
name: 该属性定义了文档级元数据的名称。用于对应网页内容，便于搜索引擎查找分类，如 keywords, description; 也可以使用浏览器厂商自定义的 meta， 如 viewport；
1.http-equiv:
该枚举的属性定义，可以改变服务器和用户代理行为的编译。编译的值取content 里的内容。简单来说即可以模拟 HTTP 协议响应头。
最常见的大概属于 Content-Type 了，设置编码类型。如
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
H5中可以简化为
<meta charset="utf-8">
http-equiv常见还有其它如下等（合理使用可增加 SEO 收录）。
Content-Language : 设置网页语言 Refresh : 指定时间刷新页面 set-cookie : 设定页面 cookie 过期时间 last-modified : 页面最后生成时间 expires : 设置 cache 过期时间 cache-control : 设置文档的缓存机制 ...
2.viewport
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
width - // viewport 的宽度 （范围从200 到10,000，默认为980 像素）
height - // viewport 的高度 （范围从223 到10,000）
initial-scale - // 初始的缩放比例 （范围从>0 到10）
minimum-scale - // 允许用户缩放到的最小比例
maximum-scale - // 允许用户缩放到的最大比例
user-scalable - // 用户是否可以手动缩 (no,yes)
3.format-detection
<meta name="format-detection" content="telphone=no" />
设置是否将数字变为电话号码：
IOS私有属性
1.apple-mobile-web-app-capable
启用 webapp 模式, 会隐藏工具栏和菜单栏，全局浏览，和其它配合使用。
<meta name="apple-mobile-web-app-capable" content="yes" />
2.apple-mobile-web-app-status-bar-style
设置IOS中Safari顶端状态条样式
default(白色，默认) | black(黑色) | black-translucent(半透明)
注意：若值为“black-translucent”将会占据页面位置，浮在页面上方（会覆盖页面 20px 高度， Retina 屏幕为 40px ）。
3.apple-touch-icon
指定放置主屏幕上 icon 文件路径;
<link rel="apple-touch-icon" href="touch-icon-iphone.png"> <link rel="apple-touch-icon" sizes="76x76" href="touch-icon-ipad.png"> <link rel="apple-touch-icon" sizes="120x120" href="touch-icon-iphone-retina.png"> <link rel="apple-touch-icon" sizes="152x152" href="touch-icon-ipad-retina.png">
默认 iphone 大小为 60px, ipad 为 76px, retina 屏乘2；
如没有一致尺寸的图标，会优先选择比推荐尺寸大，但是最接近推荐尺寸的图标。
ios7以前系统默认会对图标添加特效（圆角及高光），如果不希望系统添加特效，则可以用apple-touch-icon-precomposed.png代替apple-touch-icon.png
4.apple-touch-startup-image
在 webapp 下，设置启动时候的界面;
<link rel="apple-touch-startup-image" href="/startup.png" />
不支持 size 属性，可以使用 media query 来控制。iphone 和 touch 上，图片大小必须是 230*480 px,只支持竖屏;
其它meta
<!-- 启用360浏览器的极速模式(webkit) --> <meta name="renderer" content="webkit"> <!-- 避免IE使用兼容模式 --> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <!-- 针对手持设备优化，主要是针对一些老的不识别viewport的浏览器，比如黑莓 --> <meta name="HandheldFriendly" content="true"> <!-- 微软的老式浏览器 --> <meta name="MobileOptimized" content="320"> <!-- uc强制竖屏 --> <meta name="screen-orientation" content="portrait"> <!-- QQ强制竖屏 --> <meta name="x5-orientation" content="portrait"> <!-- UC强制全屏 --> <meta name="full-screen" content="yes"> <!-- QQ强制全屏 --> <meta name="x5-fullscreen" content="true"> <!-- UC应用模式 --> <meta name="browsermode" content="application"> <!-- QQ应用模式 --> <meta name="x5-page-mode" content="app"> <!-- windows phone 点击无高光 --> <meta name="msapplication-tap-highlight" content="no">
所以，一般新建页面的时候，可以采用如下结构， 再依据自己的实际需要添加所需即可。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> <meta name="apple-mobile-web-app-capable" content="yes" /> <meta name="format-detection"content="telephone=no" /> <title>Demo</title> </head> <body> <!-- code here --> </body> </html>
以上内容转自http://www.tuicool.com/articles/NnQFRv