iPhone屏幕分辨率和适配规则(基础篇)

随着iPhone 5、iPhone 6、iPhone 6 Plus、iPhone X等机型的发布,iPhone也进入了一个多屏时代。不同的屏幕尺寸给我们带来了很大的困扰。今天,我们来看看iPhone的适配。

屏幕尺寸

机身尺寸

机身尺寸是指手机机身的尺寸。

iPhone 8机身尺寸

机身尺寸和APP设计无关,这个尺寸不常用。

屏幕尺寸

屏幕尺寸是指屏幕的对角线长度。

iPhone 屏幕尺寸

一般情况下,我们说iPhone 8的屏幕是4.7寸屏,就是指iPhone 8的屏幕对角线为4.7英寸。

单位

屏幕的单位是以英寸为单位。换算关系如下:

1 inch = 2.54cm = 25.4mm 

分辨率

历代iPhone的分辨率

设备 逻辑分辨率(point) 物理分辨率(pixel) 屏幕尺寸 缩放因子 PPI
iPhone 2G 320 × 480 320 × 480 3.5寸 @1x 163
iPhone 3 320 × 480 320 × 480 3.5寸 @1x 163
iPhone 3GS 320 × 480 320 × 480 3.5寸 @1x 163
iPhone 4 320 × 480 640 × 960 3.5寸 @2x 326
iPhone 4S 320 × 480 640 × 960 3.5寸 @2x 326
iPhone 5 320 × 568 640 × 1136 4.0寸 @2x 326
iPhone 5S/5C 320 × 568 640 × 1136 4.0寸 @2x 326
iPhone 6 375 × 667 750 × 1334 4.7寸 @2x 326
iPhone 6 Plus 414 × 736 1080 × 1920 5.5寸 @3x 401
iPhone 6S 375 × 667 750 × 1334 4.7寸 @2x 326
iPhone 6S Plus 414 × 736 1080 × 1920 5.5寸 @3x 401
iPhone SE 320 × 568 640 × 1136 4.0寸 @2x 326
iPhone 7 375 × 667 750 × 1334 4.7寸 @2x 326
iPhone 7 Plus 414 × 736 1080 × 1920 5.5寸 @3x 401
iPhone 8 375 × 667 750 × 1334 4.7寸 @2x 326
iPhone 8 Plus 414 × 736 1080 × 1920 5.5寸 @3x 401
iPhone X 375 × 812 1125 × 2436 5.8寸 @3x 458
屏幕对比

屏幕宽高比

设备 物理分辨率(pixel) 宽高比(近似) 比例(近似)
iPhone 2G/3/3GS 320 × 480 1.50 2:3
iPhone 4/4S 640 × 960 1.50 2:3
iPhone 5/5S/5C/SE 640 × 1136 1.77 9:16
iPhone 6/6S/7/8 750 × 1334 1.77 9:16
iPhone 6/6S/7/8 Plus 1080 × 1920 1.77 9:16
iPhone X 1125 × 2436 2.16 9:20

从比例可以看出,历代iPhone中,在iPhone 5和iPhone X进行了加长处理。中间的各个版本的比例是一致的。

因为iPhone的屏幕尺寸数值比较奇怪,都不是整数,所以只能取一个近似值。事实上,在像素级的差异上,肉眼是很难分清楚细微差异的。

逻辑分辨率和物理分辨率

逻辑分辨率以point(pt)为单位,物理分辨率以pixel(px)为单位。

区分逻辑分别率和物理分辨率是因为在早期iPhone 3GS之前,iOS绘制图形以point为单位。在这个时期point和pixel严格对应在一起。在iPhone 3GS上:

1 pt = 1 px

到了iPhone 4开始,苹果引入了Retina屏幕。在一定物理单位内可以显示2倍的像素。iPhone 4的屏幕物理尺寸还是3.5寸,分辨率为640 × 960,提升了4倍。也就是说,原先的1 point可以容纳4个pixel。

到了iPhone 4,逻辑分辨率和物理分辨率的关系就成了:

1 pt = 2 px

缩放因子(scale)

因为逻辑分辨率和物理分辨率存在着一定的比例关系,这种比例的关系称为缩放因子。其对应关系为:

1 pt = scale * px

在iPhone 3GS上,缩放因子为1(以“@1x”来表示)。在iPhone 4上,缩放因子为2(以“@2x”来表示)。

奇葩的iPhone 6屏幕

iPhone 6有iPhone 6和iPhone Plus两个屏幕尺寸。其中iPhone 6 Plus的屏幕均为5.5寸屏幕。其标明缩放因子为@3x,我们通过缩放因子计算,其分辨率应该为1242 × 2208。但是,实际上iPhone 6 Plus的像素为1080 × 1920。严格来说,iPhone 6 Plus的缩放因子应该为:

scale = 1080 px / 414 pt ≈ @ 2.6x

实际上,iPhone 6 Plus上做了特殊的缩放处理。假设我们画一条100pt的线。经过如下步骤进行最终显示出来:

  1. 以逻辑点描述
    开始我们以点的方式描述直线所在的起始位置。100pt的直线。

  2. 渲染成像素点
    通过缩放因子@3x,将点渲染成逻辑画布。100pt被渲染成了300px。

  3. 进行缩放采样
    对渲染进行缩放采样,计算实际显示的画布。缩小的倍数为1.15(@3x/@2.6x)。300px被缩小成了260px。

目前iPhone 6/7/8 Plus均同样处理。用@3x这样的缩放因子可能是为了编程的时候更容易。有兴趣的可以看一下这篇文章《奇葩的iPhone 6 屏幕》

像素密度PPI

像素密度PPI(Pixel Per Inch)是指每英寸上容纳的像素数量。

计算PPI,可以简单用勾股定理计算出对线上出现的像素,再除以对角线上长度:

将iPhone 4屏幕数据代入公式:

PPI对显示的影响

我们知道,手机的屏幕是以像素的方式一个一个呈现出来的。PPI值越高,意味着有更细腻的画面。

较低PPI的屏幕看起来有颗粒感。但是当PPI值到达一定程度后,再继续提升肉眼就分别不出来了。这就是苹果提出的Retina显示屏的概念。在一定的距离内,手机显示屏在200PPI以上时,肉眼就分辨不出单个像素点了。

注意,这里有两个限制条件:“在一定的距离内”、“在手机显示屏上”。有兴趣的可以详细了解,PPI值对我们适配影响不大,这里不展开。

好了,关于屏幕分辨率的基础概念就讲到这里。下一篇《屏幕分辨率和适配规则-iPhone篇(规则篇)》再讲讲适配的规则。


《iPhone屏幕分辨率和适配规则(基础篇)》
《iPhone屏幕分辨率和适配规则(规则篇)》
《iPhone屏幕分辨率和适配规则(实现篇)》

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

推荐阅读更多精彩内容