简述

为了避免 Android 设备的适配大坑，苹果提供一套适配自家产品不同尺寸的方案，让我们来探究一下像素与点的关系吧。

探究

从初代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个像素

这样用户在使用iPhone 4 的时候，会感觉比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 系列设备参数表)

机型

屏幕宽高(点)

屏幕宽高(渲染像素)

设备分辨率

屏幕模式

 屏幕精度(ppi)

屏幕对角线长度

iPhone 3GS

320 x 480

320 x 480

320 x 480

@1x

162

3.5 英寸

iPhone 4

320 x 480

640 x 960

640 x 960

@2x

326

3.5 英寸

iPhone 4s

320 x 480

640 x 960

640 x 960

@2x

326

3.5 英寸

iPhone 5

320 x 568

640 x 1136

640 x 1136

@2x

326

4.0 英寸

iPhone 5s

320 x 568

640 x 1136

640 x 1136

@2x

326

4.0 英寸

iPhone 5c

320 x 568

640 x 1136

640 x 1136

@2x

326

4.0 英寸

iPhone 6

375 x 667

750 x 1334

750 x 1334

@2x

326

4.7 英寸

iPhone 6 Plus

414 x 736

1242 × 2208

1080 x 1920

@3x

401

5.5 英寸

iPhone 6s

375 x 667

750 x 1334

750 x 1334

@2x

326

4.7 英寸

iPhone 6s Plus

414 x 736

1242 × 2208

1080 x 1920

@3x

401

5.5 英寸

iPhone 7

375 x 667

750 x 1334

750 x 1334

@2x

326

4.7 英寸

iPhone 7 Plus

414 x 736

1242 × 2208

1080 x 1920

@3x

401

5.5 英寸

iPhone 8

375 x 667

750 x 1334

750 x 1334

@2x

326

4.7 英寸

iPhone 8 Plus

414 x 736

1242 × 2208

1080 x 1920

@3x

401

5.5 英寸

iPhone X

375 x 812

1125 x 2436

1125 x 2436

@3x

458

5.8 英寸

iPhone Xs

375 x 812

1125 x 2436

1125 x 2436

@3x

458

5.8 英寸

iPhone Xs Max

414 x 896

1242 x 2688

1242 x 2688

@3x

458

6.5 英寸

iPhone XR

414 x 896

828 x 1792

828 x 1792

@2x

326

6.1 英寸

iPhone SE

320 x 568

640 × 1336

640 x 1336

@2x

326

4.0 英寸

iPhone SE(2)

375 x 667

750 x 1334

750 x 1334

@2x

326

4.7 英寸

iPhone 11

414 x 896

828 × 1792

828 x 1792

@2x

326

6.1 英寸

iPhone 11 Pro

375 x 812

1125 x 2436

1125 x 2436

@3x

458

5.8 英寸

iPhone 11 Pro Max

414 x 896

1242 × 2688

1242 x 2688

@3x

458

6.5 英寸

iPhone 12 mini

360 x 780

1080 x 2340

1080 x 2340

@3x

476

5.4 英寸

iPhone 12

390 x 884

1170 x 2532

1170 x 2532

@3x

460

6.1英寸

iPhone 12 Pro

390 x 884

1170 x 2532

1170 x 2532

@3x

460

6.1 英寸

iPhone 12 Pro Max

428 x 926

1284 x 2778

1284 x 2778

@3x

458

6.7 英寸

(注: 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的。)

参考资料

1  http://www.zhihu.com/question/25421514

2  http://www.jianshu.com/p/ea0c362ed4b6

3  https://www.apple.com/cn/iphone/compare/

4  http://bbs.feng.com/read-htm-tid-8740473.html

5 https://blog.csdn.net/littlelittlepeng/article/details/109645910

iPhone 记录之 点与像素相关推荐

  1. iphone重启记录_如何阻止您的iPhone记录您的常用位置

    iphone重启记录 It can be a little unnerving when your iPhone seems to know your routine, like it has ESP ...

  2. iphone 中的大小和像素问题

    在iphone 4和4S中,显示得像素已经由480*320,调整成了960*640. 虽然像素提升了4倍,但是事实上点阵是没有变化得.也就是说控制点阵还是480*320; 但是显示点阵扩大了4倍. 这 ...

  3. 点阵图像与矢量图像的计算机记录原理,第二章像素地概念,分辨率地概念,点阵及矢量图象地特点。第四节：图像格式地选择.docx...

    实用标准文案 实用标准文案 精彩文档 精彩文档 第二章 像素的概念,分辨率的概念,点阵及矢量图象的特点.第四节:图像格 式的选择 图像格式,矢量,图片,格式,jpg 从上面点阵与矢量两者的对比中,似乎 ...

  4. iPhone上最好用的像素画编辑器推荐2023

    iPhone上好用的像素画App: 1,新出的 Resprite 好看又好用,适合专业做独立游戏的资产,无广告,有aseprite类似的时间轴,适合做动画 2,王者pixel studio 免费,基于 ...

  5. 最新苹果手机iPhone各机型尺寸以及像素对照表

  6. iphone字体大小使用的像素

    八号＝5磅(5pt) ==(5/72)*96=6.67 =6px 七号＝5.5磅 ==(5.5/72)*96=7.3 =7px 小六＝6.5磅 ==(6.5/72)*96=8.67 =8px 六号＝7 ...

  7. 移动端适配之一：到底什么是像素

    最近在做移动端的开发,深入了解了下移动端适配的一些问题,加上自己的理解,记录下来,写一个小的系列博客,与大家分享.所有的问题,就开始从像素说起吧~ 像素是一个经常提到的概念,写CSS的人都经常会用到p ...

  8. iPhone 3G超速开箱实测

    iPhone 3G实测报告 iPhone 3G以君临天下之姿在全球多国发售,ePrice比价王香港站,有幸成为全香港唯一有机会参予试机的网络媒体.我们将以破天荒的篇幅,一连四篇,抢先把iPhone 3 ...

  9. DICOM世界观·第二章：[1]像素 Pixel (Picture Element)

    背景: 原本该小节想直接套用上世纪一片著名论文<A Pixel Is Not A Little Square>作为标题,怎奈英文原文信息量较大,内部蕴含了很多关于采样定理的信息论知识,虽然 ...

  10. 【转】像素 Pixel (Picture Element)

    原文链接:https://blog.csdn.net/zssureqh/article/details/78768942 1.像素Pixel 讲到概念,首选Wiki百科.当然我说的是英文版Pixel ...

最新文章

  1. 使用PixelLib来实现图像分割
  2. 用价值锚定革掉股市的命！
  3. 19.Oracle10g服务器管理恢复--RMAN表空间恢复(练习33)
  4. PaddlePaddle——手写数字识别DEMO
  5. 在Xcode8中 如何添加.pch文件
  6. 使用js命名空间进行模块式开发
  7. 深刻理解Servlet运行机制和生命周期
  8. 机器学习入门必备的13张“小抄”（附下载）
  9. [置顶] 我的iOS作品
  10. 算法踩坑4-冒泡排序
  11. 大厂技术文档：Python 基础+爬虫+数据分析+面试经精选
  12. 如何从微博安装包里提取微博表情包？
  13. 逐帧动画案例（奔跑的小人）
  14. Python利用fitz库提取pdf中的图片（针对多种类型pdf）
  15. 二进制数的反码和补码
  16. pyppeteer 报 Execution context was destroyed, most likely because of a navigation
  17. 工业过程控制领域中通信
  18. 巧用千寻位置GNSS软件|逐点放样应用技巧
  19. android studio代码教程,史上最详细的Android Studio系列教程三
  20. linux texlive 卸载,[linux-018] ubuntu安装texlive 2020用xelatex编译一个简单tex示

热门文章

  1. swiftui改变图片尺寸_SwiftUI中的等轴测视图
  2. 案例|工业物联网解决方案•空调系统智能监控运维云平台
  3. iphone分辨率中的scale参数
  4. 西藏拉姆拉错：蓝蓝的湖水
  5. 基于深度学习的图像修复—心中无码
  6. java 错误: 无法将类 Customer中的构造器 Customer应用到给定类型
  7. 【1】EFR32配置433Mhz（可通信CC1101）——EFR32 项目例程打开和烧录
  8. win7计算机共享用户名和密码,Win7共享提示用户名密码错误怎么办
  9. 《时代周刊》：投资者为何争相购买虚拟土地？
  10. Js数据类型间的相互转换