移动端html5之IOS篇

一、在移动端head 中都会加入如下一些app专属的Meta元素

  1. <meta name=”viewport” content=”width=device-width, initial-scale=1,  maximum-scale=1, minimum-scale=1.0,  user-scalable=no”>
  2. <meta name=”apple-mobile-web-app-title” content=“iOS title”>
  3. <meta name=”apple-mobile-web-app-capable” content=”yes”>
  4. <meta name=”apple-mobile-web-app-status-bar-style” content=”black”>
  5. <meta name=”format-detection” content=”telephone=no”>
  6. <meta name=”format-detection” content=”address=no”>
  7. <meta name=”format-detection” content=”email=no”>
  8. <link href=”/images/apple-touch-icon-57×57.png” rel=”apple-touch-icon”>
  9. <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>