webapp开发要点记录

1. iphone 各机型

 

机型分辨率像素比物理分辨率高* 宽 * 后主屏对角线长度重量像素密度（ppi）iphone4/iphone4s320 * 4802640 * 960

4.5x2.31x0.37 in

115.2×58.6×9.3 mm

3.5 in137/140g 329.65iphone5/iphone5s320 * 5682640 * 1136123.8×58.6×7.6 mm4 in112g 325.97iphone6375 * 6672750 * 1334

5.44x2.64x0.27 in

138.1x67x6.9 mm

4.7 in129g 325.61iphone6+414 * 73631242 * 2208

6.22x3.06x0.28 in

158.1x77.8x7.1mm

5.5 in172g 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/iphone4s320 * 4802640 * 960640 * 920 iphone5/iphone5s320 * 5682640 * 1136640 * 1096 iphone6375 * 6672750 * 1334750 * 1294 iphone6+(portrait)414 * 73631242 * 22081242 * 2148 iphone6+(landscape)736 * 41432208 * 12422208 * 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。

 

 iphone4siphone6 背景颜色文字颜色高度背景颜色文字颜色高度正常系统栏白色黑色20白色黑色20不写该meta标签黑色黑色20白色白色20default黑色黑色20白色黑色20black黑色白色20黑色黑色20black-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  iosiphone6微信 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

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