webapp开发要点记录

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

将页面添加到桌面主屏幕后，如果有这个标签的话

点击生成的图标就会进入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标签为：

<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)"/>

<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)"/>

<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)"/>

<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)"/>

<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

注：iphone4s 和 iphone6 中测试

4. format-detection

safari 会自动识别页面中出现的手机号，点击后会弹出电话呼叫提示，如果不想safari自动识别，可以设置

至于email，我在iphone4s和iphone6上测试，并没有自动识别

5. apple-mobile-web-app-status-bar-style

以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下只需

这一个尺寸就够用了

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开发要点记录的更多相关文章

WebApp开发总结
WebApp开发总结框架的使用网络上都有教程,就不写了,主要记录下个人的开发总结以方便以后开发注意. css公用样式统一定义 css样式抽出复用 appearance: none; 取消系统默认样式 ...
webapp填坑记录[更新中]
网上也有许多的 webapp 填坑记录了,这几个月,我在公司正好也做了2个,碰到了一些问题,所以我在这里记录一下我所碰到的问题: meta 头部声明在开发的时候,刚刚创建 HTML 文件,再使用浏览器 ...
iBatis & myBatis & Hibernate 要点记录
iBatis & myBatis & Hibernate 要点记录这三个是当前常用三大持久层框架,对其各自要点简要记录,并对其异同点进行简单比较. 1. iBatis iBatis主 ...
移动前端webApp开发点滴积累20140524
#webApp开发几点体会(移动前端) ##前言本文旨在记录本人涉足移动webApp开发的几点体会,欢迎分享与指正. ##再见,IE678 移动设备,Android跟iPhone是主流,即使是win ...
webapp填坑记录
网上也有许多的 webapp 填坑记录了,这几个月,我在公司正好也做了2个,碰到了一些问题,所以我在这里记录一下我所碰到的问题: meta 头部声明在开发的时候,刚刚创建 HTML 文件,再使用浏览器 ...
【blade利刃出鞘】一起进入移动端webapp开发吧
前言在移动浪潮袭来的时候,小钗有幸进入框架组做webapp框架开发,过程中遇到了移动端的各种坑,也产生了各种激情,就我们公司的发展历程来说第一阶段:使用传统方式开发移动站点,少量引入HTML5元素 ...
iOS开发之记录用户登录状态
iOS开发之记录用户登录状态我们知道:CoreData的配置和使用步骤还是挺复杂的.但熟悉CoreData的使用流程后,CoreData还是蛮好用的.今天要说的是如何记录我们用户的登陆状态.例如微信 ...
webapp开发调试环境--weinre配置
用谷歌调试工具中的手机模拟器模拟手机进行webapp的开发,与真机上的效果还是有些偏差,opera手机模拟器的效果亦不佳.有时在pc上开发出来的webapp效果良好,在部分真机上就出现了偏差,这时候就 ...
webapp开发中的一些注意的
和大多数响应式的布局一样,webapp开发也是需要浮动布局和百分比布局,需要考虑的是小屏幕手机250px和大屏幕设备768px,但是习惯以320px和640px来分割,jq中的一句话$(functio ...

随机推荐

BZOJ4423 [AMPPZ2013]Bytehattan
本文版权归ljh2000和博客园共有,欢迎转载,但须保留此声明,并给出原文链接,谢谢合作. 本文作者:ljh2000作者博客:http://www.cnblogs.com/ljh2000-jump/转 ...
bc#29 做题笔记
昨天的bc被坑惨了= = 本来能涨rating的大好机会又浪费了...大号已弃号 A:第一反应是高精度,结果模板找不到了= =,然后现学现卖拍了个java的BigInteger+快速幂,调了好半天不说 ...
js调用刷新
_self.fireEvent('refresh');
页面记载给绑定query的grid加filter
功能名称:listDataAction 切入类型:before 事件名称:com.kingdee.bos.webframework.dynamic.event.view.WebListDataEven ...
Handlers
示例: - name: Configure webserver with nginx and tls hosts: webservers sudo: True vars: conf_file: /et ...
MySql的一些操作
我们安装mysql时一开始root用户如果没设置的话是可以没有密码的,所以,如果需要设置密码,则格式:mysql> set password for 用户名@localhost = passw ...
在CentOS上安装Sublime Text
CentOS 是基于 Red Hat (RHEL) 的, 其中并没有包管理工具 apt. 最近需要在装了 CentOS 系统的服务器上安装Sublime Text, 到官网上看了一下, 对其他 (De ...
系统安装之：虚拟机VMware V12.0.1 专业版 + 永久密钥
撰写日期:2016-6-30 10:30:26 转自:http://blog.sina.com.cn/s/blog_4549d6770102vxue.html VMware V12.0.1 专业 ...
区别 Jquery对象和Dom对象
在讨论之前,先约定好定义变量的风格. 如果获取的对象是jQuery对象,那么在变量前加上$,例如: var $variable = jQuery对象; 如果获取的是DOM对象,则定义如下: var v ...
JZOJ 1312:关灯问题
传送门少见的DP再DP题目.题面不短,但是可以看出来这是一道DP题.而且正解的算法复杂度应该是$O(N^3)$.而且给了部分$O(N^4)$的算法的分.可以看出来要AC是要在DP上加上优化的. 设$ ...

webapp开发要点记录

webapp开发要点记录的更多相关文章

随机推荐

热门专题