Web网页尺寸(1)

开发十年,就只剩下这套Java开发体系了 >>>   hot3.png

浏览器/系统

一个网页的尺寸设置和浏览器与系统的尺寸大为相关,我们不可能满足所有用户的最佳尺寸,但我们能做的是让绝大多少用户感觉是最佳的。

  • 任务栏的高度 30px
  • 任务栏的高度 40px
  • 任务栏的高度 40px
  • 任务栏的高度 40px
浏览器  谷歌浏览器  火狐浏览器  IE浏览器  360浏览器  Safari浏览器  搜狗浏览器  傲游浏览器
状态栏 22px(浮动出现) 20px 24px 24px --- 25px 24
菜单栏 60px 132px 120px 140px --- 163px 147
滚动条 15px 15px 15px 15px --- 15px 15px

系统分辨率

对大于30W台客户端用户进行测试,得到的测试数据如下(数据统计于2016年03月网络)

  • 电脑安全分辨率 1024 X 768 px
  • 建议大分辨率 1280 X 800 px
  • 网页安全宽度 1002 px
  • 建议较大宽度 1258 px

浏览器首屏高度:即电脑屏幕除掉任务栏、浏览器菜单栏以及状态栏后剩下的网页第一屏显示高度。

常见分辨率1024×768下的网页首屏高度平均值是584px
综合分辨率及浏览器统计数据,安全高度 580 px

常见分辨率1440×900下的网页首屏高度平均值是716px
综合分辨率及浏览器统计数据,安全高度 710 px

常见分辨率1920×1080下的网页首屏高度平均值是905px
综合分辨率及浏览器统计数据,安全高度 900 px

常见分辨率1920×1080下的网页首屏高度平均值是905px
综合分辨率及浏览器统计数据,安全高度 900 px

分别率 占有率
1920x1080 px 13.91%
1366x768 px 9.75%
1440x900 px 7.73%
1280x720 px 7.11%
1024x768 px 5.40%
1600x900 px 3.55%

设备尺寸

设备 操作系统 物理尺寸 长/宽 设备宽度 分辨率 密度 长宽比
MacBook Pro 15英寸(高分辨率) OS X 15.4" / 39.0cm 1680x1050px 1680 px 120 px 100% MDPI 8:5
MacBook Pro 15英寸(2006-2012) OS X 15.4" / 39.0cm 1440x900px 14400 px 110 px 100% MDPI 8:5
MacBook Pro 17英寸(2007-2011) OS X 17.3" / 44.0cm 1920x1200px 1920 px 131 px 100% MDPI 8:5
MacBook Pro 13英寸(视网膜显示屏) OS X 13.3" / 34.0cm 2560x1600px 1280 px 227 px 200% MDPI 8:5
MacBook Pro 15英寸(视网膜显示屏) OS X 15.4" / 39.0cm 2880x1800px 1440 px 220 px 200% MDPI 8:5
iMac 27英寸(2009-2012) OS X 27.0" / 69.0cm 2560x1440px 2560 px 109 px 100% MDPI 16:9
iMac 21.5英寸(2009-2012) OS X 21.5" / 55.0cm 1920x1080px 1920 px 102 px 100% MDPI 16:9
MacBook Air 13英寸(2010-2012) OS X 13.3" / 34.0cm 1440x900px 14400 px 128 px 100% MDPI 8:5
MacBook Air 11英寸(2010-2012) OS X 11.6" / 29.0cm 1366x768px 1366 px 135 px 100% MDPI 16:9
MacBook Pro 13英寸(2009-2012) OS X 13.3" / 34.0cm 1280x800px 1280 px 113 px 100% MDPI 8:5
Apple 30" Cinema Display OS X 30.0" / 76.0cm 2560x1600px 2560 px 100 px 100% MDPI 8:5
Apple Thunderbolt Display OS X 27.0" / 69.0cm 2560x1440px 2560 px 109 px 100% MDPI 16:9
联想THINKPAD X230 Windows 12.5" / 32.0cm 1366x768px 1366 px 125 px 100% MDPI 16:9
戴尔 Inspiron 14 series 36" Windows 14.1" / 36.0cm 1600x900px 1600 px 130 px 100% MDPI 16:9

你可能感兴趣的:(Web网页尺寸(1))