一、在移动端head 中都会加入如下一些app专属的Meta元素
- <meta name=”viewport” content=”width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1.0, user-scalable=no”>
- <meta name=”apple-mobile-web-app-title” content=“iOS title”>
- <meta name=”apple-mobile-web-app-capable” content=”yes”>
- <meta name=”apple-mobile-web-app-status-bar-style” content=”black”>
- <meta name=”format-detection” content=”telephone=no”>
- <meta name=”format-detection” content=”address=no”>
- <meta name=”format-detection” content=”email=no”>
- <link href=”/images/apple-touch-icon-57×57.png” rel=”apple-touch-icon”>
- <link media=”(device-height:480px)” href=”startup/apple-touch-startup-image-640×920.png” rel=”apple-touch-startup-image”>
1、viewport
width ：这个还用说么，，你可以自己手动设置数值，也可等同于设置宽device-width
initial-scale ：表示页面初始的缩放比例1:1
maximum-scale：表示允许用户缩放的最大比例
minimum-scale：表示允许用户缩放的最小比例
user-scalable：是否允许用户进行手动缩放(yes/no)
2、apple-mobile-web-app-title
网页默认的title 是不是太长了，可以自己定义一个类似ios app 名
3、apple-mobile-web-app-capable
添加到主屏后，点击图标启动后会隐藏导航和工具栏
4、apple-mobile-web-app-status-bar-style
这个我一直以为是隐藏手机顶部的条，好吧我面壁去了。
其实就是一个背景颜色，默认为白色，可以设置black 和灰色半透明 black-translucent
设置为“black-translucent”将会占据页面px位置，浮在页面上方（会覆盖页面20px高度，iphone4和itouch4的Retina屏幕为40px）
5、format-detection——telephone
默认为识别数字为电话号码，telephone=no 为禁止
6、format-detection——address
禁止跳转为地图 address=no
7、format-detection——email
禁止设置识别邮箱，email=no
8、apple-touch-icon
设置保存到主屏的icon 图标，如果不设置默认为整个页面截图，亲测真的丑到爆好么。
<link href=”/images/apple-touch-icon-114×114.png” rel=”apple-touch-icon” sizes=”114×114″>
<link href=”/images/apple-touch-icon-120×120.png” rel=”apple-touch-icon” sizes=”120×120”>
图片尺寸可以设定为57*57（px）或者Retina可以定为114*114（px），ipad尺寸为72*72（px）
9、apple-touch-startup-image
为了高逼格，当然少不了启动动画，模拟的当然要真一些嘛。
<link media=”(device-height:480px)” href=”startup/apple-touch-startup-image-640×920.png” rel=”apple-touch-startup-image”>
<link media=”(device-height:568px)” href=”startup/apple-touch-startup-image-640×1096.png” rel=”apple-touch-startup-image”>
media
设备高度为480px 代表iPhone4/4s
设备高度为568px 代表iPhone5
二、一些元素技巧
10、文件上传
<input type=”file”> 单文件
<input type=“file” multiple > 多文件
11、直接呼出数字键盘
<input type=”tel”>
12、呼出email键盘
<input type=“email”>
13、打电话
<a href=”tel:12345654321″>打电话给我</a>
14、发短信
<a href=”sms:12345654321″>发短信</a>