WEB网页及平板设计规范标准参考

根据中国互联网BAT对国内网民上网终端分辨率的统计分析,2021年中国PC电脑端用户显示器大多为22-24英寸屏幕,分辨率从几年前主流的1440×900、1280×800、1366×768提升到1920×1080(全高清)和2K为主,少数已在使用4K屏、5K屏,甚至苹果iMac在已推出了8K屏,所以我们在设计的时候,还是以1920×1080(全高清)为主,以下表格为2019年国内用户的屏幕分辨率使用情况:

常见网页设计尺寸参考

分辨率 使用率 说明
1920x1080px 40% 全高清FHD
1440x900px 20% PC办公室最常用
1366x768px 14% PC笔记本常用
1280x800px 10% Macbook常用
2560x1440px 9% 2K
3480x2160px 4% 4K
其它分辨率 3%

对于WEB界面设计师来说,目前设计网页以FHD全高清分辨率来设计为佳:1920x1080。

电脑屏幕尺寸参考

设备名称 操作系统 尺寸 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

显示器屏幕尺寸参考

设备名称 操作系统 尺寸 in PPI 比例 宽x高 dp 宽x高 px 密度 dpi
Apple Thunderbolt Display - 27 109 16 : 9 2560 x 1440 2560 x 1440 1.0 mdpi
Dell UltraSharp HD 5K - 27 218 16 : 9 2560 x 1440 5120 x 2880 2.0 xhdpi
Dell UltraSharp U2515H - 25 123 16 : 9 1280 x 720 2560 x 1440 2.0 xhdpi
Dell UltraSharp U2417H - 23.8 92 16 : 9 1920 x 1080 1920 x 1080 1.0 mdpi
Dell UltraSharp U2717D - 27 114 16 : 9 2560 x 1440 2560 x 1440 1.0 mdpi
Dell UltraSharp U3415W - 34 110 21 : 9 3440 x 1440 3440 x 1440 1.0 mdpi
LG 34UC98-W - 34 110 21 : 9 3440 x 1440 3440 x 1440 1.0 mdpi
LG UltraFine 4K - 21.5 218 16 : 9 1920 x 1080 4096 x 2304 2.0 xhdpi
LG UltraFine 5K - 27 218 16 : 9 2560 x 1440 5120 x 2880 2.0 xhdpi

平板电脑屏幕尺寸参考

设备名称 操作系统 尺寸 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