APP设计稿尺寸规范
设备 | 像素(points) | 渲染像素(Rendered Pixels) | 物理像素(Physical Pixels) | 像素比(Device Pixel Ratio) | Status Bar 状态栏高 (px) | Title Bar 导航条高 (px) | Tab Bar 底栏/标签栏高 (px) | 图片资源后缀 |
---|---|---|---|---|---|---|---|---|
iPhone 4/s | 320 × 480 | 640 × 960 | 640 × 960 | 2 | 20px | 44px | 49px | @2x |
iPhone 5/s | 320 × 568 | 640 × 1136 | 640 × 1136 | 2 | 40px | 88px | 98px | @2x |
iPhone 6 | 375 × 667 | 750 × 1334 | 750 × 1334 | 2 | 40px | 88px | 98px | @2x |
iPhone 6 Plus | 414 × 736 | 1242 × 2208 | 1080 × 1920 | 3 | 54px | 132px | 146px | @3x |
微信浏览器 - 可视区域适口大小 Chrome浏览器 Emulation模拟器设置值
设备 | 微信 | 设计稿 | 像素比 | 说明 |
---|---|---|---|---|
iPhone 4/s | 320 × 416 | 640 × 960 | 2 | 设计稿 - 128px (状态栏 + 导航栏高度) = 视图高度 |
iPhone 5/s | 320 × 504 | 640 × 1008 | 2 | |
iPhone 6 | 375 × 603 | 750 × 1206 | 2 | |
iPhone 6 Plus | 414 × 672 | 3 | ||
华为Meta 8 | 360 × 532 | 3 | 本人机子亲测 屏幕高度640 - (状态栏24px + 导航栏48px + 底部标签栏36px) 高度是 108px = 532px |
- 说明:此表用于本人Chrome浏览器 Emulation模拟器测试