iOS与Android界面尺寸规范
手机设备名称
|
操作系统 | 尺寸 in | PPI | 纵横比 | 宽 x 高 dp | 宽 x 高 px | 密度 dpi |
---|---|---|---|---|---|---|---|
iPhone X | iOS | 5.8 | 458 | 19 : 9 | 375 x 812 | 1125 x 2436 | 3.0 xxhdpi |
iPhone 8+ (8+, 7+, 6S+, 6+) | iOS | 5.5 | 401 | 16 : 9 | 414 x 736 | 1242 x 2208 | 3.0 xxhdpi |
iPhone 8 (8, 7, 6S, 6) | iOS | 4.7 | 326 | 16 : 9 | 375 x 667 | 750 x 1334 | 2.0 xhdpi |
iPhone SE(SE, 5S, 5C) | iOS | 4.0 | 326 | 16 : 9 | 320 x 568 | 640 x 1136 | 2.0 xhdpi |
Android One | Android | 4.5 | 218 | 16 : 9 | 320 x 569 | 480 x 854 | 1.5 hdpi |
Google Pixel | Android | 5.0 | 441 | 16 : 9 | 411 x 731 | 1080 x 1920 | 2.6 xxhdpi |
Google Pixel XL | Android | 5.5 | 534 | 16 : 9 | 411 x 731 | 1440 x 2560 | 3.5 xxxhdpi |
Moto X | Android | 4.7 | 312 | 16 : 9 | 360 x 640 | 720 x 1280 | 2.0 xhdpi |
Moto X 二代 | Android | 5.2 | 424 | 16 : 9 | 360 x 640 | 1080 x 1920 | 3.0 xxhdpi |
Nexus 5 | Android | 5.0 | 445 | 16 : 9 | 360 x 640 | 1080 x 1920 | 3.0 xxhdpi |
Nexus 5X | Android | 5.2 | 565 | 16 : 9 | 411 x 731 | 1080 x 1920 | 2.6 xxhdpi |
Nexus 6 | Android | 6.0 | 493 | 16 : 9 | 411 x 731 | 1440 x 2560 | 3.5 xxxhdpi |
Nexus 6P | Android | 5.7 | 518 | 16 : 9 | 411 x 731 | 1440 x 2560 | 3.5 xxxhdpi |
Samsung Galaxy S8 | Android | 5.8 | 570 | 18.5 : 9 | 360 x 740 | 1440 x 2960 | 4.0 xxxhdpi |
Samsung Galaxy S8+ | Android | 6.2 | 529 | 18.5 : 9 | 360 x 740 | 1440 x 2960 | 4.0 xxxhdpi |
Samsung Galaxy Note 4 | Android | 5.7 | 515 | 16 : 9 | 480 x 853 | 1440 x 2560 | 3.0 xxhdpi |
Samsung Galaxy Note 5 | Android | 5.7 | 518 | 16 : 9 | 480 x 853 | 1440 x 2560 | 3.0 xxhdpi |
Samsung Galaxy S5 | Android | 5.1 | 432 | 16 : 9 | 360 x 640 | 1080 x 1920 | 3.0 xxhdpi |
Samsung Galaxy S7 | Android | 5.1 | 576 | 16 : 9 | 360 x 640 | 1440 x 2560 | 4.0 xxxhdpi |
Samsung Galaxy S7 Edge | Android | 5.5 | 534 | 16 : 9 | 360 x 640 | 1440 x 2560 | 4.0 xxxhdpi |
Smartisan T2 | Android | 4.95 | 445 | 16 : 9 | 360 x 640 | 1080 x 1920 | 3.0 xxhdpi |
Smartisan M1 | Android | 5.15 | 428 | 16 : 9 | 360 x 640 | 1080 x 1920 | 3.0 xxhdpi |
Smartisan M1L | Android | 5.7 | 515 | 16 : 9 | 480 x 853 | 1440 x 2560 | 3.0 xxhdpi |
坚果 Pro | Android | 5.5 | 403 | 16 : 9 | 360 x 640 | 1080 x 1920 | 3.0 xxhdpi |
OnePlus 5 | Android | 5.5 | 401 | 16 : 9 | 360 x 640 | 1080 x 1920 | 3.0 xxhdpi |
OnePlus 3T | Android | 5.5 | 401 | 16 : 9 | 360 x 640 | 1080 x 1920 | 3.0 xxhdpi |
Oppo R9s (R9s, R11) | Android | 5.5 | 401 | 16 : 9 | 360 x 640 | 1080 x 1920 | 3.0 xxhdpi |
Oppo R9s Plus | Android | 6.0 | 368 | 16 : 9 | 360 x 640 | 1080 x 1920 | 3.0 xxhdpi |
Oppo A57 | Android | 5.2 | 282 | 16 : 9 | 360 x 640 | 720 x 1280 | 2.0 xhdpi |
Oppo A59s | Android | 5.5 | 267 | 16 : 9 | 360 x 640 | 720 x 1280 | 2.0 xhdpi |
Oppo A37 | Android | 5.0 | 293 | 16 : 9 | 360 x 640 | 720 x 1280 | 2.0 xhdpi |
小米MIX2 | Android | 5.99 | 403 | 18 : 9 | 360 x 720 | 1080 x 2160 | 3.0 xxhdpi |
小米MIX | Android | 6.4 | 362 | 17 : 9 | 360 x 680 | 1080 x 2040 | 3.0 xxhdpi |
小米Note 3 | Android | 5.5 | 403 | 16 : 9 | 360 x 640 | 1080 x 1920 | 3.0 xxhdpi |
小米Note 2 | Android | 5.7 | 386 | 16 : 9 | 360 x 640 | 1080 x 1920 | 3.0 xxhdpi |
小米6 | Android | 5.15 | 428 | 16 : 9 | 360 x 640 | 1080 x 1920 | 3.0 xxhdpi |
小米5s | Android | 5.15 | 428 | 16 : 9 | 360 x 640 | 1080 x 1920 | 3.0 xxhdpi |
小米5s Plus | Android | 5.7 | 386 | 16 : 9 | 360 x 640 | 1080 x 1920 | 3.0 xxhdpi |
小米Max | Android | 6.44 | 342 | 16 : 9 | 360 x 640 | 1080 x 1920 | 3.0 xxhdpi |
红米Note 4 (4, Note 4X) | Android | 5.5 | 403 | 16 : 9 | 360 x 640 | 1080 x 1920 | 3.0 xxhdpi |
红米 4 (4, 4X) | Android | 5.0 | 296 | 16 : 9 | 360 x 640 | 720 x 1280 | 2.0 xhdpi |
Vivo X9 (X9, X9s) | Android | 5.5 | 401 | 16 : 9 | 360 x 640 | 1080 x 1920 | 3.0 xxhdpi |
Vivo X9 Plus ( | Android | 5.88 | 375 | 16 : 9 | 360 x 640 | 1080 x 1920 | 3.0 xxhdpi |
HUAWEI P10 | Android | 5.1 | 432 | 16 : 9 | 360 x 640 | 1080 x 1920 | 3.0 xxhdpi |
HUAWEI P10 Plus | Android | 5.5 | 540 | 16 : 9 | 360 x 640 | 1440 x 2560 | 4.0 xxxhdpi |
iPad界面尺寸规范
iPad设备名称
|
操作系统 | 尺寸 in | PPI | 纵横比 | 宽 x 高 dp | 宽 x 高 px | 密度 dpi |
---|---|---|---|---|---|---|---|
iPad mini 4 (mini 4, mini 2) | iOS | 7.9 | 326 | 4 : 3 | 768 x 1024 | 1536 x 2048 | 2.0 xhdpi |
iPad Air 2 (Air 2, Air) | iOS | 9.7 | 264 | 4 : 3 | 768 x 1024 | 1536 x 2048 | 2.0 xhdpi |
iPad Pro 9.7 | iOS | 9.7 | 264 | 4 : 3 | 768 x 1024 | 1536 x 2048 | 2.0 xhdpi |
iPad Pro 10.5 | iOS | 10.5 | 264 | 4 : 3 | 834 x 1112 | 1668 x 2224 | 2.0 xhdpi |
iPad Pro 12.9 | iOS | 12.9 | 264 | 4 : 3 | 1024 x 1336 | 2048 x 2732 | 2.0 xhdpi |
Google Pixel C | Android | 10.2 | 308 | 4 : 3 | 900 x 1280 | 1800 x 2560 | 2.0 xhdpi |
Nexus 9 | Android | 8.9 | 288 | 4 : 3 | 768 x 1024 | 1536 x 2048 | 2.0 xhdpi |
Surface 3 | Windows | 10.8 | 214 | 16 : 9 | 720 x 1080 | 1080 x 1920 | 1.5 hdpi |
小米平板 2 | Android | 7.9 | 326 | 16 : 9 | 768 x 1024 | 1536 x 2048 | 2.0 xhdpi |
Apple Watch界面尺寸规范
watch 设备名称
|
操作系统 | 尺寸 in | PPI | 纵横比 | 宽 x 高 dp | 宽 x 高 px | 密度 dpi |
---|---|---|---|---|---|---|---|
Apple Watch 38mm | watch OS | 1.5 | 326 | 5 : 4 | 136 x 170 | 272 x 340 | 2.0 xhdpi |
Apple Watch 42mm | watch OS | 1.7 | 326 | 5 : 4 | 156 x 195 | 312 x 390 | 2.0 xhdpi |
Moto 360 | Android | 1.6 | 205 | 32 : 29 | 241 x 218 | 320 x 290 | 1.3 tvdpi |
Moto 360 v2 42mm | Android | 1.4 | 263 | 65 : 64 | 241 x 244 | 320 x 325 | 1.3 tvdpi |
Moto 360 v2 46mm | Android | 1.6 | 263 | 33 : 32 | 241 x 248 | 320 x 330 | 1.3 tvdpi |
电脑界面尺寸规范
电脑设备名称
|
操作系统 | 尺寸 in | PPI | 纵横比 | 宽 x 高 dp | 宽 x 高 px | 密度 dpi |
---|---|---|---|---|---|---|---|
MacBook | OS X | 12.0 | 226 | 16 : 10 | 1280 x 800 | 2304 x 1440 | 2.0 xhdpi |
MacBook Air 11 | OS X | 11.6 | 135 | 16 : 9 | 1366 x 768 | 1366 x 768 | 1.0 mdpi |
MacBook Air 13 | OS X | 13.3 | 128 | 16 : 10 | 1440 x 900 | 1440 x 900 | 1.0 mdpi |
MacBook Pro 13 | OS X | 13.3 | 227 | 16 : 10 | 1280 x 800 | 2560 x 1600 | 2.0 xhdpi |
MacBook Pro 15 | OS X | 15.4 | 220 | 16 : 10 | 1440 x 900 | 2880 x 1800 | 2.0 xhdpi |
iMac 21.5 | OS X | 21.5 | 102 | 16 : 9 | 1920 x 1080 | 1920 x 1080 | 1.0 mdpi |
iMac 21.5 4K | OS X | 21.5 | 218 | 16 : 9 | 1920 x 1080 | 4096 x 2304 | 2.0 xhdpi |
iMac 27 | OS X | 27 | 109 | 16 : 9 | 2560 x 1440 | 2560 x 1440 | 1.0 mdpi |
iMac 27 5K | OS X | 27 | 218 | 16 : 9 | 2560 x 1440 | 5120 x 2880 | 2.0 xhdpi |
Surface Book | Windows | 13.5 | 267 | 3 : 2 | 1500 x 1000 | 3000 x 2000 | 2.0 xhdpi |
Surface Pro | Windows | 12.3 | 267 | 3 : 2 | 1368 x 912 | 2736 x 1824 | 2.0 xhdpi |
Surface Laptop | Windows | 13.5 | 201 | 3 : 2 | 1128 x 752 | 2256 x 1504 | 2.0 xhdpi |
Surface Studio | Windows | 28 | 192 | 3 : 2 | 2250 x 1500 | 4500 x 3000 | 2.0 xhdpi |
Dell XPS 13 | Windows | 13.3 | 276 | 16 : 9 | 1920 x 1080 | 3200 x 1800 | 1.5 hdpi |
Dell XPS 15 | Windows | 15.6 | 280 | 16 : 9 | 1920 x 1080 | 3840 x 2160 | 2.0 xhdpi |
小米笔记本Air 12.5 | Windows | 12.5 | 176 | 16 : 9 | 1920 x 1080 | 1920 x 1080 | 1.0 mdpi |
小米笔记本Air 13.3 | Windows | 13.3 | 166 | 16 : 9 | 1920 x 1080 | 1920 x 1080 | 1.0 mdpi |
小米笔记本Pro 15.6 | Windows | 15.6 | 166 | 16 : 9 | 1920 x 1080 | 1920 x 1080 | 1.0 mdpi |
iOS界面细节尺寸规范
设备 | 分辨率 | PPI | 状态栏高度 | 导航栏高度 | 标签栏高度 |
---|---|---|---|---|---|
iPhone6 plus设计版 | 1242×2208 px | 401PPI | 60px | 132px | 146px |
iPhone6 plus放大版 | 1125×2001 px | 401PPI | 54px | 132px | 146px |
iPhone6 plus物理版 | 1080×1920 px | 401PPI | 54px | 132px | 146px |
iPhone6 | 750×1334 px | 326PPI | 40px | 88px | 98px |
iPhone5 – 5C – 5S | 640×1136 px | 326PPI | 40px | 88px | 98px |
iPhone4 – 4S | 640×960 px | 326PPI | 40px | 88px | 98px |
iPhone & iPod Touch第一、二、三代 | 320×480 px | 163PPI | 20px | 44px | 49px |
iOS图标设计规范
设备 | App Store | 程序应用 | 主屏幕 | Spotlight搜索 | 标签栏 | 工具栏和导航栏 |
---|---|---|---|---|---|---|
iPhone6 Plus (@3×) | 1024×1024 px | 180×180 px | 114×114 px | 87×87 px | 75×75 px | 66×66 px |
iPhone6 (@2×) | 1024×1024 px | 120×120 px | 114×114 px | 58×58 px | 75×75 px | 44×44 px |
iPhone5 – 5C – 5S (@2×) | 1024×1024 px | 120×120 px | 114×114 px | 58×58 px | 75×75 px | 44×44 px |
iPhone4 – 4S (@2×) | 1024×1024 px | 120×120 px | 114×114 px | 58×58 px | 75×75 px | 44×44 px |
iPhone & iPod Touch第一代、第二代、第三代 | 1024×1024 px | 120×120 px | 57×57 px | 29×29 px | 38×38 px | 30×30 px |
iPad界面细节尺寸规范
设备 | 尺寸 | 分辨率 | 状态栏高度 | 导航栏高度 | 标签栏高度 |
---|---|---|---|---|---|
iPad 3 – 4 – 5 – 6 – Air – Air2 – mini2 | 2048×1536 px | 264PPI | 40px | 88px | 98px |
iPad 1 – 2 | 1024×768 px | 132PPI | 20px | 44px | 49px |
iPad Mini | 1024×768 px | 163PPI | 20px | 44px | 49px |
iPad图标设计规范
设备 | App Store | 程序应用 | 主屏幕 | Spotlight搜索 | 标签栏 | 工具栏和导航栏 |
---|---|---|---|---|---|---|
iPad 3 – 4 – 5 – 6 – Air – Air2 – mini2 | 1024×1024 px | 180×180 px | 144×144 px | 100×100 px | 50×50 px | 44×44 px |
iPad 1 – 2 | 1024×1024 px | 90×90 px | 72×72 px | 50×50 px | 25×25 px | 22×22 px |
iPad Mini | 1024×1024 px | 90×90 px | 72×72 px | 50×50 px | 25×25 px | 22×22 px |
Android图标尺寸规范
屏幕大小 | 启动图标 | 操作栏图标 | 上下文图标 | 系统通知图标(白色) | 最细笔画 |
---|---|---|---|---|---|
320×480 px | 48×48 px | 32×32 px | 16×16 px | 24×24 px | 不小于2 px |
480×800px 480×854px 540×960px | 72×72 px | 48×48 px | 24×24 px | 36×36 px | 不小于3 px |
720×1280 px | 48×48 dp | 32×32 dp | 16×16 dp | 24×24 dp | 不小于2 dp |
1080×1920 px | 144×144 px | 96×96 px | 48×48 px | 72×72 px | 不小于6 px |
DP换算表
名称 | 分辨率 | 比率 rate (针对320px) | 比率 rate (针对640px) | 比率 rate (针对750px) |
---|---|---|---|---|
idpi | 240×320 | 0.75 | 0.375 | 0.32 |
mdpi | 320×480 | 1 | 0.5 | 0.4267 |
hdpi | 480×800 | 1.5 | 0.75 | 0.64 |
xhdpi | 720×1280 | 2.25 | 1.125 | 1.042 |
xxhdpi | 1080×1920 | 3.375 | 1.6875 | 1.5 |
主流Android手机分辨率与尺寸
设备 | 分辨率 | 尺寸 | 设备 | 分辨率 | 尺寸 |
---|---|---|---|---|---|
魅族MX2 | 4.4英寸 | 800×1280 px | 魅族MX3 | 5.1英寸 | 1080×1280 px |
魅族MX4 | 5.36英寸 | 1152×1920 px | 魅族MX4 Pro未上市 | 5.5英寸 | 1536×2560 px |
三星GALAXY Note 4 | 5.7英寸 | 1440×2560 px | 三星GALAXY Note 3 | 5.7英寸 | 1080×1920 px |
三星GALAXY S5 | 5.1英寸 | 1080×1920 px | 三星GALAXY Note II | 5.5英寸 | 720×1280 px |
索尼Xperia Z3 | 5.2英寸 | 1080×1920 px | 索尼XL39h | 6.44英寸 | 1080×1920 px |
HTC Desire 820 | 5.5英寸 | 720×1280 px | HTC One M8 | 4.7英寸 | 1080×1920 px |
OPPO Find 7 | 5.5英寸 | 1440×2560 px | OPPO N1 | 5.9英寸 | 1080×1920 px |
OPPO R3 | 5英寸 | 720×1280 px | OPPO N1 Mini | 5英寸 | 720×1280 px |
小米M4 | 5英寸 | 1080×1920 px | 小米红米Note | 5.5英寸 | 720×1280 px |
小米M3 | 5英寸 | 1080×1920 px | 小米红米1S | 4.7英寸 | 720×1280 px |
小米M3S未上市 | 5英寸 | 1080×1920 px | 小米M2S | 4.3英寸 | 720×1280 px |
华为荣耀6 | 5英寸 | 1080×1920 px | 锤子T1 | 4.95英寸 | 1080×1920 px |
LG G3 | 5.5英寸 | 1440×2560 px | OnePlus One | 5.5英寸 | 1080×1920 px |
主流浏览器的界面参数与份额
浏览器 | 状态栏 | 菜单栏 | 滚动条 | 市场份额(国内) |
---|---|---|---|---|
Chrome 浏览器 | 22 px(浮动出现) | 60 px | 15 px | 8% |
火狐浏览器 | 20 px | 132 px | 15 px | 1% |
IE浏览器 | 24 px | 120 px | 15 px | 35% |
360 浏览器 | 24 px | 140 px | 15 px | 28% |
遨游浏览器 | 24 px | 147 px | 15 px | 1% |
搜狗浏览器 | 25 px | 163 px | 15 px | 5% |
系统分辨率统计
分辨率 | 占有率 | 分辨率 | 占有率 |
---|---|---|---|
1366×768 | 15% | 1440×900 | 13% |
1920×1080 | 11% | 1600×900 | 5% |
1280×800 | 4% | 1280×1024 | 3% |
1680×1050 | 2.8% | 320×480 | 2.4% |
480×800 | 2% | 1280×768 | 1% |