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

随机推荐

Python简介及环境部署
Python的由来: Python的创始人:Guido van Rossum Guido 在1989年12月时,寻找一门“课余”编程项目来打发圣诞节前后的时间.Guido决定为当时正构 ...
C#调试方法
单步执行有三种, 一种是每次执行一行(F10): 一种是每次执行一行,但遇到函数调用就会跳到被调用的函数里(F11): 一种是直接执行当前函数里剩下的指令,返回上一级函数(Shift+F11). 还 ...
Timer
timer类有三种 1.System.Windows.Forms.Timer 使用地方:Windows 窗体应用程序中,并且必须在窗口中使用. 2.System.Timers.Timer 使用地方 ...
jqGrid使用方法
1.下载文件下载jqGrid的软件包,下载地址为:http://www.trirand.com/blog/?page_id=6 下载jQuery文件,下载地址为:http://code.jquery ...
用DOS命令配置服务开机自启动
2016-08-19 15:01 Create 使用命令 sc config 参考博客:http://blog.csdn.net/it1988888/article/details/7992626 ...
数据结构与算法分析–Minimum Spanning Tree(最小生成树)
给定一个无向图,如果他的某个子图中,任意两个顶点都能互相连通并且是一棵树,那么这棵树就叫做生成树(spanning tree). 如果边上有权值,那么使得边权和最小的生成树叫做最小生成树(MST,Mi ...
wildfly 在 jee war 外部写配置文件
有时需要写属性文件,保存配置值,当然也可以写在数据库.这里我们用文件方式. 最简单做法: 写在wildfly的配置目录里面: File confDir = new File(System.getPro ...
JavaWeb---总结(十一)使用Cookie进行会话管理
一.会话的概念会话可简单理解为:用户开一个浏览器,点击多个超链接,访问服务器多个web资源,然后关闭浏览器,整个过程称之为一个会话. 有状态会话:一个同学来过教室,下次再来教室,我们会知道这个同学曾 ...
nginx的在linux系统中的安装
1 nginx安装环境 nginx是C语言开发,建议在linux上运行,本教程使用Centos6.5作为安装环境. n gcc 安装nginx需要先将官网下载的源码进行编译,编译依赖gcc环境,如果 ...
HTML5预学习长期更新
HTML5 仍处于完善之中. 为 HTML5 建立的一些规则: 新特性应该基于 HTML.CSS.DOM 以及 JavaScript. 减少对外部插件的需求(比如 ...

webapp开发要点记录

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

随机推荐

热门专题