数据载入中,请稍后......
 
展开
懒人码库客户端 点击或扫描下载
欢迎来到懒人码库!懒人码库QQ群:19651313
欢迎来到懒人码库!懒人码库QQ群:19651313  
当前位置:懒人码库 > 移动web开发

Web APP开发技巧总结

2015-11-10 16:15 来源:www.lanrenmaku.com / 作者:懒人 已被阅读:次 分类:移动web开发 上一篇:HBuilder 入门(1) 下一篇:推荐几个精致的web UI框架

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  
         

 

 
 
 
 
标签:webapp
小贴士:懒人码库 为网页前端人员提供建站常用的广告代码和网页特效,内容涵盖焦点图,导航菜单,jQuery代码,图片特效,对联广告,日历控件,在线客服等。