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 | ||