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

  1. WebApp开发总结

    WebApp开发总结 框架的使用网络上都有教程,就不写了,主要记录下个人的开发总结以方便以后开发注意. css公用样式统一定义 css样式抽出复用 appearance: none; 取消系统默认样式 ...

  2. webapp填坑记录[更新中]

    网上也有许多的 webapp 填坑记录了,这几个月,我在公司正好也做了2个,碰到了一些问题,所以我在这里记录一下我所碰到的问题: meta 头部声明在开发的时候,刚刚创建 HTML 文件,再使用浏览器 ...

  3. iBatis & myBatis & Hibernate 要点记录

    iBatis & myBatis & Hibernate 要点记录 这三个是当前常用三大持久层框架,对其各自要点简要记录,并对其异同点进行简单比较. 1. iBatis iBatis主 ...

  4. 移动前端webApp开发点滴积累20140524

    #webApp开发几点体会(移动前端) ##前言 本文旨在记录本人涉足移动webApp开发的几点体会,欢迎分享与指正. ##再见,IE678 移动设备,Android跟iPhone是主流,即使是win ...

  5. webapp填坑记录

    网上也有许多的 webapp 填坑记录了,这几个月,我在公司正好也做了2个,碰到了一些问题,所以我在这里记录一下我所碰到的问题: meta 头部声明在开发的时候,刚刚创建 HTML 文件,再使用浏览器 ...

  6. 【blade利刃出鞘】一起进入移动端webapp开发吧

    前言 在移动浪潮袭来的时候,小钗有幸进入框架组做webapp框架开发,过程中遇到了移动端的各种坑,也产生了各种激情,就我们公司的发展历程来说 第一阶段:使用传统方式开发移动站点,少量引入HTML5元素 ...

  7. iOS开发之记录用户登录状态

    iOS开发之记录用户登录状态 我们知道:CoreData的配置和使用步骤还是挺复杂的.但熟悉CoreData的使用流程后,CoreData还是蛮好用的.今天要说的是如何记录我们用户的登陆状态.例如微信 ...

  8. webapp开发调试环境--weinre配置

    用谷歌调试工具中的手机模拟器模拟手机进行webapp的开发,与真机上的效果还是有些偏差,opera手机模拟器的效果亦不佳.有时在pc上开发出来的webapp效果良好,在部分真机上就出现了偏差,这时候就 ...

  9. webapp开发中的一些注意的

    和大多数响应式的布局一样,webapp开发也是需要浮动布局和百分比布局,需要考虑的是小屏幕手机250px和大屏幕设备768px,但是习惯以320px和640px来分割,jq中的一句话$(functio ...

随机推荐

  1. 微信小程序一步步搭建商城系列-01-开篇

    1.小程序介绍 小程序是一种不需要下载安装即可使用的应用,它实现了应用“触手可及”的梦想,用户扫一扫或者搜一下即可打开应用.也体现了“用完即走”的理念,用户不用关心是否安装太多应用的问题.应用将无处不 ...

  2. Linux内核邮件列表发送和回复格式研究

    1.使用的内容格式为[纯文本],这个在国内的客户端已经没有了,大公司只有微软的outlook. 2.回复引用时,使用符号[>]作为标记,且回复的内容不能在最顶部,应该在最下面.参考:http:/ ...

  3. OrCAD Capture使用记录

    1.安装 ①修改host_ID为主机名称(如果填不对,安装过程会提示你再填一次):其后跟的是机子的MAC地址,用ipconfig /all 可以查看. ②下一行的FLEMlm,后面跟的是文件cdslm ...

  4. 电影发烧友必备知识-720P、1080P、4K的区别

    随着技术的进步,现在的影视作品的清晰度也越来越高,观众的体验也越来越好,普清的电影基本没人看了,尤其是影视爱好者现在都是看1080P或蓝光原盘.4K. 目前主流清晰度主要分为720P(高清).1080 ...

  5. AngularJs ngInclude、ngTransclude

    这两个都是HTML DOM嵌入指令 ngInclude 读取,编译和插入外部的HTML片段. 格式:ng-include=“value”<ng-include src=”value” onloa ...

  6. Emmet (Zen Coding) 官方文档中HTML语法的总结

    1. 嵌套操作---------- 子操作: > div>ul>li <div> <ul> <li></li> </ul> ...

  7. CF724C: Ray Tracing

    传送门 CF的题质量真心不低,这道题的标准解法(应该)是exgcd,打比赛的时候想到了具体的推导公式了,也意识到了需要用exgcd,但是因为寝室要锁门了(其实就是太弱,就放弃了. 首先很显然,这条线所 ...

  8. 网络存储（四）之ISCSI的进阶

    前言 上一篇博客中我们讲了如何搭建一个简单的iscsi网络存储系统,这块有个安全问题就是,任何知道target name的客户端都可以随意连接ISCSI服务器.但是很多时候,通过授权认证连接共享磁盘或 ...

  9. HDU1392Surround the Trees（凸包判断 + 求周长）

    http://www.cnblogs.com/hmhard/archive/2013/02/05/2893035.html 这是判断三角区域那块写的不好. 判断凸包的方法: 1.将所有点按照y从小到大 ...

  10. 加载信息，先从数据库取出5条实现分页，鼠标向上滑动触发Ajax再加载5条，达到异步刷新，优化加载。。。

    php数据库取数据 <?php include("conn1.php"); include('../function/functions.php'); $page=intva ...