屏幕适配那些事(01)屏幕适配和逻辑分辨率

屏幕适配是一个老生常谈的问题了,我用这三篇博客和大家讨论点屏幕适配相关的干货。


什么是屏幕适配?

我们先来给屏幕适配下一个定义:

屏幕适配是让一套UI在不同尺寸、不同分辨率和不同比例的屏幕上都能正常显示。

这里的“正常”两个字比较模糊,我来解释一下,设备的尺寸、分辨率、比例不同,但是系统在显示内容的时候,有一个虚拟的度量单位——逻辑像素——这也是我们下面一节要讨论的内容。我们姑且认为“更大的屏幕”(逻辑分辨率更高的屏幕)应该显示更多内容,拿iPhone/Android的内置应用的设计作为例子很合适,它们在不同的设备上都能“正常”显示。我们看一个例子,相同的一张图片,要求在屏幕中央显示,对比下面的第2/3/4张图,你会发现“正常”和“不正常”的区别。

normal_design

图二的开发者可能将设计师的意图理解为图片居中显示,大小为xxx px。

图三的开发者可能将设计师的意图理解为图片居中显示,距边框xxx dp。

图四的“不正常”可能不太明显,其和图三的做法类似,只不过在考虑和边框的距离时,使用了px单位而不是dp,这也将导致意外的结果,我们将马上讨论这一点。

对相同设计稿的不同理解可能导致意想不到的结果,真实设备的屏幕千差万别,每个元素都差一点点,整个界面的最终显示效果就会变得异常奇怪。

在深入讨论"如何构建具有很强适应能力的UI?"这个非常难的问题之前,让我们先清楚了解逻辑像素和它相关的概念。

逻辑像素、逻辑分辨率、逻辑像素密度

和上面一样,我们先给逻辑像素下一个定义:

逻辑像素是与屏幕像素密度无关的抽象“点”的概念,是设计和开发UI的一般单位,用dp表示。

iOS开发中使用pt表示密度无关像素,为了统一,这里使用表意更加明确的dp单位。

然后是逻辑像素相关的概念:

逻辑分辨率就是用逻辑像素描述屏幕的分辨率,例如360dp*640dp。(具有这个逻辑分辨率的手机型号非常多,大多数5英寸左右的Android手机,其逻辑分辨率都是这个值。)

逻辑像素密度使用屏幕像素密度相对于基准屏幕密度的倍数表示,即相对密度。常见的对于逻辑像素密度的描述比如iOS开发中常用的“2倍图”、“3倍图”。逻辑像素密度表示逻辑像素和物理像素之间的关系:

假设逻辑像素密度为n,那么1 dp = n px。

下面展示在三种具有不同像素密度的屏幕上显示相同物理大小(相同逻辑像素大小)的圆的情况,用以说明引入逻辑像素的意义。

density_circle

上面三个圆的直径和描边,用像素为单位表示,分别为8px/1px,16px/2px,32px/4px。可以这样解释,为了在具有不同像素密度的屏幕上呈现相同的物理尺寸,需要针对每种屏幕指定不同的尺寸。

Apple和Google都非常有预见性,他们让iOS和Android使用dp为单位度量屏幕上的UI元素。上面的情况,如果使用逻辑像素描述,均为8dp/1dp,这使得我们在设计和开发的时候,不需要关注这个屏幕的像素密度究竟是多少,只关心逻辑分辨率即可。这也就是密度无关像素——逻辑像素的由来和意义。

逻辑分辨率带来的另外一个好处是:屏幕显示内容的多少,和屏幕大小的关系更为紧密,而和屏幕分辨率、屏幕像素密度(ppi)的关系并不大。这是符合人们的常识的——屏幕越大,显示内容越多。目前的部分Android设备在这个问题上处理的并不是那么好,后面会提到。

如果你使用过不同尺寸的iPhone和不同尺寸的Android设备,你可能会有这样的感觉:iPhone的设计符合“屏幕越大,显示内容越多的常识”,而且是线性变化的;而Android设备则不然,越大的屏幕,并不一定显示更多的内容,比如三星S7和三星S7 edge,屏幕尺寸分别为5.1和5.5英寸,但是他们显示的内容是一样多的(逻辑分辨率一致)。

如果拿Android设备和iPhone进行对比,结果同样让人惊讶,Nexus5的屏幕尺寸为5英寸,iPhone6的屏幕尺寸为4.7英寸,按照常识,Nexus5应该比iPhone6显示更多的内容,但实际情况刚好相反,Nexus5显示的内容更少!因为Nexus5的逻辑分辨率为360 ×640(dp),而iPhone6/6s/7的逻辑分辨率为375×667(dp)。

下面这张图说明了上面例子中物理尺寸和逻辑分辨率上的差异。

nexus5_iphone7

通常我们看到手机介绍页面会大家宣传屏幕分辨率和屏幕密度,其实他们对于屏幕显示内容的多少并没有太大关系,因为它们的操作系统决定了它们显示内容的规则——逻辑分辨率决定了显示内容的多少,而逻辑像素和屏幕的物理尺寸关系更加密切。

屏幕分辨率和屏幕密度更加明显的影响是对清晰程度的影响,相同屏幕尺寸,分辨率越高,屏幕密度越高,显示越清晰。但是有一个常识,300ppi的屏幕已经足以让眼睛在正常使用的时候无法区分单个像素点,也就是乔布斯提出的“视网膜屏幕”概念,400ppi的屏幕足以让人眼在近距离观察屏幕时无法区分单个像素点。也就是说,除非你使用放大镜观察屏幕,正常使用的话,400ppi以上的屏幕没啥必要了,甚至300ppi就已经足够了。

上面这段话针对LCD屏幕,如果是LED屏幕的话,受排列方式影响,300ppi是远不够达到视网膜屏幕水平的,三星S7edge的ppi达到了534,才能称之为优秀。不过这不是这篇博客讨论的内容,如果你想继续了解的话,可以去查一下。

更多设备的逻辑分辨率参考:Devices

下篇文章我们将讨论Android的逻辑分辨率是怎么计算得出的。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 196,264评论 5 462
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 82,549评论 2 373
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 143,389评论 0 325
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 52,616评论 1 267
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 61,461评论 5 358
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 46,351评论 1 273
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 36,776评论 3 387
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 35,414评论 0 255
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 39,722评论 1 294
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,760评论 2 314
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,537评论 1 326
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,381评论 3 315
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 37,787评论 3 300
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,030评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,304评论 1 252
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 41,734评论 2 342
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 40,943评论 2 336

推荐阅读更多精彩内容