设备尺寸杂谈:响应性Web设计中的尺寸问题

目前在为移动设备设计界面时,最头疼的问题莫过于尺寸的问题。我们无法使用固定的尺寸来进行设计,因为不同设备的大小千变万化。但是如果我们了解了设备的物理特性后,这将有助于我们进行更好的设计。
 

 
不同的设备可能具有相同的屏幕分辨率,但是他们的物理特性差别却非常大。一代iPad的屏幕尺寸是9.7寸,分辨率为1024*768、132dpi。Kindle Kyeboard 3G的物理尺寸只有6寸,同样是768*1024的分辨率,像素却是212dpi。
 
获取屏幕的尺寸有很多种办法,包括" Resolution Media Query ",这种办法作为 Media Queries的规范已经存在很长时间,但是在还没有正式发布之前,不是所有的浏览器都支持。但是很幸运,WebKit在这方面已经迈出了重要一步,下面是基本的用法:
 
@media ( min-resolution: 250dpi ){
     
}
 
这句话可以将低分辨率图片过滤掉,只保留高分辨率的图片。
 
实际上对于设计师来说,他们对分辨率并不是那么感兴趣。因为他们是为人类而设计,所以最好有 width: 1寸,这样的单位。可惜的是,当今的社会是电子化的社会,物理的尺寸和电子像素不完全一致,做为设计师,我们需要来填补这两个不同之间的鸿沟。
 
来比较一下下面的两段代码:
 
@media (min-resolution:341dpi) and (min-width: 767px) > {
 
}
 
@media (max-resolution:131dpi) and (min-width: 767px) > {
 
}
 
粗看上去,这两段代码非常相似,实际上是用来区分不同设备的,第一个适用于 HTC Windows Phone 8X,第二个适用于 iPad2。通过使用 Resolution Query,可以将小设备同大设备区分开。两个设备的的宽度都是768px,物理尺寸一个是10英寸(iPad),一个却是4.3英寸(HTC)。更重要的是,iPad的分辨率比较低(1024*768),而HTC的分辨率比较高(1280*768)。通过 Resolution Media Query 和 Width Query 的配合使用,我们能够将具有同样宽度的不同大小的设备区分开,从而来相应的调整设计中的元素布局。
 
之前说过,实际上我们对于各个设备的分辨率并不是很关心,我们更加关心的是,这个界面是显示在一个(物理尺寸上)较大的设备还是较小的设备上。那么,我们又该如何定义大设备和小设备呢?实际上并没有明确的分割,我们必须从每个项目的实际出发,这个设备在这个项目中是小设备,但在另外一个项目中,可能被归类为大设备。
 
The Physical Size Inquiry Non-Exhaustive Theorem
 
理论:在一个组合的查询中,如果 分辨率 Resolution 与 宽度和高度中的较小的一个的比值大于5,那么基本上可以归属为大设备,如果小于5,基本上可以归属为小设备。如果得分接近于5,那么是一个中等的设备,物理上的尺寸接近于1张A4纸的大小(21*29.7cm)。
 
下面是一个验证这个理论的表格:
 
设备名称 对角线尺寸(inches) 分辨率 PPI PSINET得分
Apple iMac 27 2560*1440 109 13.00
Sony Vaio F 16.4 1920*1080 134 8.05
Apple MacBook Pro RD 13 2560*1600 227 7.04
         
Sony PSP 4.3 480*272 128 3.75
Kindle Keyboard 3G 6 768*1024 212 3.62
Kindle Fire 7 1024*600 169 3.55
Samsung Galaxy S 4 480*800 160 3.00
Samsung Galaxy Note II 5.5 720*1280 267 2.69
Samsung Galaxy S IV 5 1080*1920 441 2.62
HTC Butterfly 5 1080*1920 441 2.62
Samsung Galaxy Grand I9082 5 480*800 187 2.56
Palm Pre 3.1 480*320 186 2.5
Sony Xperia Z 5 1920*1080 443 2.43
Samsung Galaxy S III 4.8 720*1280 306 2.35
LG Nexus 4 E960 4.7 768*1280 318 2.41
Nokia Lumia 920  4.5 1280*768 332 2.31
HTC One  4.7 1080*1920 469 2.30
HTC One X 4.7 720*1280 312 2.30
HTC Desire HD 4.3 480*800 217 2.21
iPhone 5 4 640*1136 326 1.96
Apple iPod Touch 3.5 960*640 326 1.96
         
Apple iPad(1 & 2) 9.7 1024*768 132 5.81
Apple iPad(3rd Gen) 9.7 2048*1536 264 5.81
Amazon Kindle DX 9.7 824*1200 150 5.49
MICROSOFT SURFACE 10.1 1366*768 148 5.18
iPad Mini 7.9 768*1024 162 4.74
         
         
 
使用PSINET判断设备的尺寸只是一个假设,这个假设在设备的长宽相差不大的情况下还比较准确,如果长宽差别太大,这个数字就不准确了。
 
PPI的计算公式,如果一个屏幕宽1280px,高720px,对角线尺寸为4.3inches,那么PPI的计算方式为:

 
 
参考资料:

 

posted @ 2013-03-24 17:45  Cocowool  阅读(2126)  评论(0编辑  收藏  举报