设备尺寸杂谈:响应性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的计算方式为:

 
 
参考资料:

 

相关文章
|
15天前
|
监控 Linux PHP
【02】客户端服务端C语言-go语言-web端PHP语言整合内容发布-优雅草网络设备监控系统-2月12日优雅草简化Centos stream8安装zabbix7教程-本搭建教程非docker搭建教程-优雅草solution
【02】客户端服务端C语言-go语言-web端PHP语言整合内容发布-优雅草网络设备监控系统-2月12日优雅草简化Centos stream8安装zabbix7教程-本搭建教程非docker搭建教程-优雅草solution
65 20
|
4月前
|
缓存 移动开发 安全
Web安全-HTTP响应拆分(CRLF注入)漏洞
Web安全-HTTP响应拆分(CRLF注入)漏洞
252 1
|
20天前
|
监控 关系型数据库 MySQL
【01】客户端服务端C语言-go语言-web端PHP语言整合内容发布-优雅草网络设备监控系统-硬件设备实时监控系统运营版发布-本产品基于企业级开源项目Zabbix深度二开-分步骤实现预计10篇合集-自营版
【01】客户端服务端C语言-go语言-web端PHP语言整合内容发布-优雅草网络设备监控系统-硬件设备实时监控系统运营版发布-本产品基于企业级开源项目Zabbix深度二开-分步骤实现预计10篇合集-自营版
28 0
|
3月前
|
Web App开发 网络协议 安全
基于Web攻击的方式发现并攻击物联网设备介绍
基于Web攻击的方式发现并攻击物联网设备介绍
67 4
|
5月前
|
缓存 移动开发 安全
Web安全-HTTP响应拆分(CRLF注入)漏洞
Web安全-HTTP响应拆分(CRLF注入)漏洞
290 8
|
6月前
|
开发者 图形学 API
从零起步,深度揭秘:运用Unity引擎及网络编程技术,一步步搭建属于你的实时多人在线对战游戏平台——详尽指南与实战代码解析,带你轻松掌握网络化游戏开发的核心要领与最佳实践路径
【8月更文挑战第31天】构建实时多人对战平台是技术与创意的结合。本文使用成熟的Unity游戏开发引擎,从零开始指导读者搭建简单的实时对战平台。内容涵盖网络架构设计、Unity网络API应用及客户端与服务器通信。首先,创建新项目并选择适合多人游戏的模板,使用推荐的网络传输层。接着,定义基本玩法,如2D多人射击游戏,创建角色预制件并添加Rigidbody2D组件。然后,引入网络身份组件以同步对象状态。通过示例代码展示玩家控制逻辑,包括移动和发射子弹功能。最后,设置服务器端逻辑,处理客户端连接和断开。本文帮助读者掌握构建Unity多人对战平台的核心知识,为进一步开发打下基础。
238 0
|
6月前
|
存储 缓存 NoSQL
【性能飙升的秘密】FastAPI应用如何借助缓存技术实现极速响应?揭秘高效Web开发的制胜法宝!
【8月更文挑战第31天】FastAPI是一个高性能Web框架,利用Starlette和Pydantic实现高效API构建。本文介绍如何通过缓存提升FastAPI应用性能,包括使用`starlette-cache[redis]`实现Redis缓存,以及缓存一致性和缓存策略的注意事项。通过具体示例展示了缓存的配置与应用,帮助开发者构建更高效的Web应用。
410 0
|
6月前
|
前端开发 JavaScript 开发者
揭秘Web前端交互核心:掌握事件对象,让你的网页响应如丝般顺滑!
【8月更文挑战第23天】在Web前端开发中,事件处理是实现用户与网页互动的关键机制。JavaScript通过事件对象(Event Object)让开发者能捕捉并响应用户的动作,如点击或按键等。事件对象封装了事件的相关信息,在事件监听器触发时作为参数传递。本文首先介绍了事件对象的基础概念,接着详细探讨了常用属性和方法,包括`type`、`target`、`currentTarget`及`preventDefault()`等。并通过一个简单的示例展示了如何在事件处理函数中利用事件对象来获取事件类型、触发元素等信息,并演示了如何阻止默认行为。
62 0
|
8月前
|
JSON 前端开发 Java
Spring Web MVC入门(3)——响应
Spring Web MVC入门(3)——响应
74 1
|
8月前
|
XML 前端开发 JavaScript
后端请求响应和分层解耦web开发的三层架构
后端请求响应和分层解耦web开发的三层架构
56 0

热门文章

最新文章