name: 该属性定义了文档级元数据的名称。用于对应网页内容，便于搜索引擎查找分类，如 keywords, description; 也可以使用浏览器厂商自定义的 meta， 如 viewport；
1.http-equiv:
该枚举的属性定义，可以改变服务器和用户代理行为的编译。编译的值取content 里的内容。简单来说即可以模拟 HTTP 协议响应头。
最常见的大概属于 Content-Type 了，设置编码类型。如
|
1
|
<
meta
http-equiv
=
"Content-Type"
content
=
"text/html; charset=utf-8"
/>
|
H5中可以简化为
|
1
|
<
meta
charset
=
"utf-8"
>
|
http-equiv常见还有其它如下等（合理使用可增加 SEO 收录）。
|
1
2
3
4
5
6
7
|
Content-Language : 设置网页语言
Refresh : 指定时间刷新页面
set-cookie : 设定页面 cookie 过期时间
last-modified : 页面最后生成时间
expires : 设置 cache 过期时间
cache-control : 设置文档的缓存机制
...
|
2.viewport
|
1
2
|
<
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
|
1
|
<
meta
name
=
"format-detection"
content
=
"telphone=no"
/>
|
设置是否将数字变为电话号码：
IOS私有属性
1.apple-mobile-web-app-capable
启用 webapp 模式, 会隐藏工具栏和菜单栏，全局浏览，和其它配合使用。
|
1
|
<
meta
name
=
"apple-mobile-web-app-capable"
content
=
"yes"
/>
|
2.apple-mobile-web-app-status-bar-style
设置IOS中Safari顶端状态条样式
|
1
|
default(白色，默认) | black(黑色) | black-translucent(半透明)
|
注意：若值为“black-translucent”将会占据页面位置，浮在页面上方（会覆盖页面 20px 高度， Retina 屏幕为 40px ）。
3.apple-touch-icon
指定放置主屏幕上 icon 文件路径;
|
1
2
3
4
|
<
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 下，设置启动时候的界面;
|
1
|
<
link
rel
=
"apple-touch-startup-image"
href
=
"/startup.png"
/>
|
不支持 size 属性，可以使用 media query 来控制。iphone 和 touch 上，图片大小必须是 230*480 px,只支持竖屏;
其它meta
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
<!-- 启用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"
>
|
所以，一般新建页面的时候，可以采用如下结构， 再依据自己的实际需要添加所需即可。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
<!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
本文转自Ansue 51CTO博客，原文链接：http://blog.51cto.com/ansue/1639884，如需转载请自行联系原作者
