webapp开发要点记录-iphone 各机型相关知识
1. iphone 各机型
| 机型 | 分辨率 | 像素比 | 物理分辨率 | 高* 宽 * 后 | 主屏对角线长度 | 重量 | 像素密度（ppi） |
| iphone4/iphone4s | 320 * 480 | 2 | 640 * 960 | 4.5x2.31x0.37 in 115.2×58.6×9.3 mm |
3.5 in | 137/140g | 329.65 |
| iphone5/iphone5s | 320 * 568 | 2 | 640 * 1136 | 123.8×58.6×7.6 mm | 4 in | 112g | 325.97 |
| iphone6 | 375 * 667 | 2 | 750 * 1334 | 5.44x2.64x0.27 in 138.1x67x6.9 mm |
4.7 in | 129g | 325.61 |
| iphone6+ | 414 * 736 | 3 | 1242 * 2208 | 6.22x3.06x0.28 in 158.1x77.8x7.1mm |
5.5 in | 172g | 460.61 |
像素密度 = √{物理分辨率高度 ^ 2 + 物理分辨率宽度 ^ 2} / 主屏对角线长度
比如：
ppi(iphone4) = √{640 ^ 2 + 960 ^ 2} / 3.5 = 329.65
2. apple-touch-startup-image
将页面添加到桌面主屏幕后，如果有这个标签的话
<meta name="apple-mobile-web-app-capable" content="yes">
点击生成的图标就会进入app模式，这时，可以给其添加启动画面。
启动画面是一张图片，不同的机型，需要图片的大小不同，整理如下：
| 机型 | 分辨率 | 像素比 | 物理分辨率 | 图片分辨率 | |
| iphone4/iphone4s | 320 * 480 | 2 | 640 * 960 | 640 * 920 | |
| iphone5/iphone5s | 320 * 568 | 2 | 640 * 1136 | 640 * 1096 | |
| iphone6 | 375 * 667 | 2 | 750 * 1334 | 750 * 1294 | |
| iphone6+(portrait) | 414 * 736 | 3 | 1242 * 2208 | 1242 * 2148 | |
| iphone6+(landscape) | 736 * 414 | 3 | 2208 * 1242 | 2208 * 1182 |
图片的高度是物理像素高度减去顶部系统栏的 （20 * 像素比）px
对应的meta标签为：
<!-- iphone4, iphone4s-->
<link rel="apple-touch-startup-image" href="/static/img/startup-640x920.png" media="(device-width: 320px) and (device-height: 480px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2)"/>
<!-- iphone5, iphone5s-->
<link rel="apple-touch-startup-image" href="/static/img/startup-640x1096.png" media="(device-width: 320px) and (device-height: 568px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2)"/>
<!-- iphone6-->
<link rel="apple-touch-startup-image" href="/static/img/startup-750x1294.png" media="(device-width: 375px) and (device-height: 667px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2)"/>
<!-- iphone6+ portrait-->
<link rel="apple-touch-startup-image" href="/static/img/startup-1242x2148.png" media="(device-width: 414px) and (device-height: 736px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 3)"/>
<!-- iphone6+ landscape-->
<link rel="apple-touch-startup-image" href="/static/img/startup-2208x1182.png" media="(device-width: 414px) and (device-height: 736px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 3)"/>
1) 可以支持哪些图片格式？
jpg、png、gif等都可以支持，gif图片只能识别第一帧。
2) <meta name="apple-mobile-web-app-capable" content="yes"> 是否必须有？
必须有，否则就不会进入app模式，也就不会有启动画面。
3. apple-mobile-web-app-capable 和 apple-touch-fullscreen
<meta name="apple-mobile-web-app-capable" content="yes"> 这个标签会起作用
<meta name="apple-touch-fullscreen" content="yes" /> 这个标签不起作用
注：iphone4s 和 iphone6 中测试
4. format-detection
safari 会自动识别页面中出现的手机号，点击后会弹出电话呼叫提示，如果不想safari自动识别，可以设置
<meta name="format-detection" content="telephone=no" />
至于email，我在iphone4s和iphone6上测试，并没有自动识别
5. apple-mobile-web-app-status-bar-style
<meta name="apple-mobile-web-app-status-bar-style" content="default" />
以app模式启动时才起作用，设置顶部系统栏的样式，content有三个取值：default、black、black-translucent。
| iphone4s | iphone6 | |||||
| 背景颜色 | 文字颜色 | 高度 | 背景颜色 | 文字颜色 | 高度 | |
| 正常系统栏 | 白色 | 黑色 | 20 | 白色 | 黑色 | 20 |
| 不写该meta标签 | 黑色 | 黑色 | 20 | 白色 | 白色 | 20 |
| default | 黑色 | 黑色 | 20 | 白色 | 黑色 | 20 |
| black | 黑色 | 白色 | 20 | 黑色 | 黑色 | 20 |
| black-translucent | 透明 | 白色 | 0 | 透明 | 白色 | 0 |
black-translucent 时，webapp会覆盖在系统栏之上
6. apple-touch-icon
一般情况下，不需要一堆不同尺寸的icon，iphone下只需
<link rel="apple-touch-icon" sizes="144x144" href="/static/img/touch-icon-144.png" />
这一个尺寸就够用了
apple-touch-icon-precomposed
实际测试结果看来，不管有没有precomposed，都会对icon做圆角，至于阴影和抛光效果，实在是看不出来。
7. 各种UserAgent
| 系统 | 机型 | 应用 | UserAgent | |
| ios | iphone6 | 微信 | Mozilla/5.0 (iPhone; CPU iPhone OS 8_1 like Mac OS X) AppleWebKit/600.1.4 (KHTML, like Gecko) Mobile/12B411 MicroMessenger/6.1 NetType/WIFI | |
| safari | Mozilla/5.0 (iPhone; CPU iPhone OS 8_1 like Mac OS X) AppleWebKit/600.1.4 (KHTML, like Gecko) Version/8.0 Mobile/12B411 Safari/600.1.4 | |||
| safari添加到桌面 | Mozilla/5.0 (iPhone; CPU iPhone OS 8_1 like Mac OS X) AppleWebKit/600.1.4 (KHTML, like Gecko) Mobile/12B411 | |||
| safari添加到桌面 请求touch-icon和startup-image |
Web/1.0 CFNetwork/711.1.12 Darwin/14.0.0 | |||
| uc浏览器 | Mozilla/5.0 (iPhone; CPU iPhone OS 8_1 like Mac OS X; zh-CN) AppleWebKit/537.51.1 (KHTML, like Gecko) Mobile/12B411 UCBrowser/10.2.5.551 Mobile | |||
| qq浏览器 | Mozilla/5.0 (iPhone 6; CPU iPhone OS 8_1 like Mac OS X) AppleWebKit/600.1.4 (KHTML, like Gecko) Version/6.0 MQQBrowser/5.7 Mobile/12B411 Safari/8536.25 | |||
| 手机qq | Mozilla/5.0 (iPhone; CPU iPhone OS 8_1 like Mac OS X) AppleWebKit/600.1.4 (KHTML, like Gecko) Mobile/12B411 QQ/5.4.0.454 NetType/WIFI Mem/125 | |||
| 手机百度 | Mozilla/5.0 (iPhone; CPU iPhone OS 8_1 like Mac OS X) AppleWebKit/600.1.4 (KHTML, like Gecko) Mobile/12B411 baiduboxapp/0_0.1.2.6_enohpi_4331_057/1.8_2C2%257enohPi/1099a/19E278C8930889E51D6B53FC4E21ED89FBC6FCBE4FCOHGRALPB/1 |
|||
| iphone4s | safari | Mozilla/5.0 (iPhone; CPU iPhone OS 7_1_1 like Mac OS X) AppleWebKit/537.51.2 (KHTML, like Gecko) Version/7.0 Mobile/11D201 Safari/9537.53 | ||
| android | 华为荣耀 | 微信 | Mozilla/5.0 (Linux; U; Android 4.2.2; zh-cn; H30-T00 Build/HuaweiH30-T00) AppleWebKit/534.30 (KHTML, like Gecko) Version/4.0 Mobile Safari/534.30 MicroMessenger/6.1.0.57_r1024329.540 NetType/WIFI | |
| 华为荣耀 | 手机qq | Mozilla/5.0 (Linux; U; Android 4.2.2; zh-cn; H30-T00 Build/HuaweiH30-T00) AppleWebKit/534.30 (KHTML, like Gecko) Version/4.0 Mobile Safari/534.30 V1_AND_SQ_5.4.0_218_YYB_D QQ/5.4.1.2395 NetType/WIFI | ||
| 华为荣耀 | uc | Mozilla/5.0 (Linux; U; Android 4.2.2; zh-CN; H30-T00 Build/HuaweiH30-T00) AppleWebKit/534.30 (KHTML, like Gecko) Version/4.0 UCBrowser/10.1.0.527 U3/0.8.0 Mobile Safari/534.30 | ||
| 华为荣耀 | 原生 | Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/534.24 (KHTML, like Gecko) Chrome/11.0.696.34 Safari/534.24 | ||
| MX3 | uc | Mozilla/5.0 (Linux; U; Android 4.4.4; zh-CN; M351 Build/KTU84P) AppleWebKit/533.1 (KHTML, like Gecko) Version/4.0 UCBrowser/9.9.2.467 U3/0.8.0 Mobile Safari/533.1 | ||
| MX3 | 原生 | Mozilla/5.0 (Linux; U; Android 4.4.4; zh-cn; M351 Build/KTU84P) AppleWebKit/534.30 (KHTML, like Gecko) Version/4.0 Mobile Safari/534.30 | ||