最新的iPhone点和像素

从初代iPhone 到 iPhone 3GS,iPhone系列坚守 320 x 480 像素。开发人员采用绝对定位及像素模式进行处理。但是 iPhone 4之后就发生了改变,iPhone 4 采用Retina显示屏。即当前物理尺寸不变,但像素成倍增加,变成了640x960像素。

为了避免同行出现的大坑(屏幕适配难),苹果对开发人员提出了point (点) 的概念。(以一维方式进行探究)

1 在iPhone 3GS中, 1 个点 等于 1 个像素

2 在以后的设备中(非iPhone 6+/6s+/7+/8+/X) ,1个点等于2个像素 

3 iPhone 6+/6s+/7+/8+/X 中 ,1个点等于3个像素

这样用户在使用iPhone4 的时候,会感觉比iPhone 3GS 更加细腻。

由此,我们需要对市面上的一些单位及术语进行相关的总结:

1 英寸: 作为手机屏幕对角线的物理长度的单位。如 iPhone 8 Plus 为5.5英寸。

2 像素: 可以想象成屏幕上真正用来显示颜色的发光小点。如 iPhone 8 Plus 为 1080x1920 像素。

3 点:    针对开发人员,开发App时候用的单位,是一个虚拟的单位,用于屏蔽各个设备屏幕像素的不同,兼容以前的程序。

4 ppi(pixel per inch): 每英寸有多少个像素。 iPhone 4 的屏幕是  640x960像素,3.5英寸。那么根据勾股定理,对角线应该有 1154个像素,转换一下也就是 1154/3.5 = 330pi, 官方给出的数字是 326 ppi。

5 Retina屏: Retina翻译过来是视网膜。当像素太密超过 300ppi的时候,人眼就不能够区分出每个像素,因此 iPhone 4以后的屏幕都是Retina屏。

6 文字、颜色等矢量数据 放大是不会失真的。但是图片并非矢量数据,直接使用会产生问题。因此苹果对它采用不同的处理方式。

假设example.png 为 30x40 像素 (这里的单位为像素,数字图片的单位基本都为像素)。当example.png在 iPhone 3GS和 iPhone 4中使用的时候,都占据屏幕30x40个点。而iPhone 4中 1 个点等于 2 个像素,也就是30x40像素的图片,占据了60x80 像素的屏幕,因此这图片在iPhone 4中看起来会模糊。

为了对图片进行适配,需要准备三张内容相同的图片,放在同一目录下。

example.png             // 30x40 像素

example@2x.png      // 60x80 像素

example@3x.png      // 90x120 像素 

当程序中使用图片时,会根据屏幕模式自动选择对应的图片。 屏幕1x模式,就会选择example.png。 2x就会优先选择example@2x.png,假如example@2x.png不存在时,就会降级选择example.png。屏幕3x模式同理屏幕2x模式的降级选择。


附表 (至2017-11-06以来,iPhone 系列设备参数表)

(注: iPhone 6+/6s+/7+/8+ 渲染像素与设备分辨率不一致,iPhone 3GS/6+/6s+/7+/8+/X除外,其他所有iPhone的ppi是一致的,都是326,用@2x的素材。

但是6+/6s+/7+/8+的实际ppi是401,理论上苹果应该用401/326 * @2x=@2.46x的素材。但是这个奇葩的比例对UI美工而言很难切图。所以苹果为方便开发者用的是@3x的素材,然后再缩放到@2.46x上,实际上是缩放到2.46/3=83%。实际上苹果选取了一个接近比例的87%。

这样算下来,物理分辨率和虚拟分比率的比例是87%,也就是1920/0.87=2208,1080/0.87=1242 。

好处就是开发者更方便,比如准备素材时,字号可以直接调成3x的。)

iPhone 记录之 点与像素

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

推荐阅读更多精彩内容