IOS UI 规范

iphone5，iphone6和iphone6 plus的一些数据对比：

iphone5/s
iPhone 6 iPhone 6 Plus

尺寸 4” 4.7”
5.5”

Viewport’s device-width (in CSS pixels) 320 375 414

Viewport’s device-width (Android设备同分辨率参考) 360 360 400

Device Pixel Ratio 像素比 2 2
3 (近似值)

Rendered Pixels 渲染像素 (默认 viewport size * dpr) 640x1136 750×1334 1242×2208

Physical pixels 物理像素（手机显示像素） 640x1136 750×1334 1080×1920

PPI 每英寸所拥有的像素数 326 326 401

Status Bar 状态栏高 (px) 40 40
60

Title Bar 导航条高 (px) 88 88
132

Tab Bar 底栏高 (px) 98 98
147

桌面 icon (px) 120 120
180

图片资源后缀名 @2x @2x
@3x

二：Tab bar的icon大小（底栏）

图中标识的是排行榜的大小：ip5=46x46px , ip6=46x46px，ip6plus=69x69px（是46px的1.5倍）。

结论：ip6的icon,大多可以直接使用ip5的资源，plus的icon需要把ip5的icon资源x1.5倍即可，（我们当时开发xx软件的时候，android的设计尺寸是基于1080P的，我把android的资源拿出来用在plus上是完全可以的，所以开发android用的是1080P屏幕的设计师有福了，以上划线文字是原文，有错误不严谨的地方，1080P，可以将就用，我曾经把我们的
android 的1080P资源名称改成@3x，没调整大小直接放到 xcode里，模拟器跑起来 icon是很清楚的，这也可能是我们的 android 并不是640直接缩放到1080，而是每个界面手动调整的，所以资源可以暂用到 plus 上，我初期刚适配的时候是这么干的，后来发现部分图标无法识别，所以现在我又在把那些资源一个一个手动的调整成 plus 可用的 3倍（@3x）大小。）

三：

关于启动图，也就是闪屏，如果你的webapp有一个启动图，那么你又得增加两行代码适配新 iPhone 了。闪屏iPhone
6对应的图片大小是750×1334px，iPhone 6 Plus 对应的是1242×2208px.

桌面icon的大小对比

iphone5=120x120px iphone6=120x120px iphone6 plus=180x180px (是iphone5/6的1.5倍，即@3x)