1. 认识手机分辨率
在iPhone还处于2G，3G，3GS时代（即非retinap屏）的时候，屏幕宽度统一都是 320px * 480px，设计师直接按照这个固定宽度即可。但是，iPhone4的出现带来了变化，其分辨率变成了 640px * 960px ，然而屏幕物理尺寸没改变（对角线3.5英寸，屏幕高宽无官方数据，网上的2.13*4.54是整个手机的高宽，按2:3比例计算得出约为1.94*2.91）。
所以这里引入了第一组概念：
- PPI
- px density密度
- 逻辑分辨率
1.1 PPI
PPI即 Pixels Per Inch 的首字母缩写。
例如 iPhone4以前是 163 。iPhone4 的PPI是 326 （=163的2倍），后续有401，458。
计算公式： Math.pow(640^2 + 960^2, 0.5) / 3.5 = 1153.7764 / 3.5 = 329.65
注意：
- 每个像素视为1个小正方形块，对角线其实不是正好穿过每个小正方形的对角线，所以算出来的对角线上有 1153.7764 这么个含小数点的值。
- 这里算出来不是 326 ，猜测对角线可能不是正好3.5英寸，但搜索了一圈未找到任何相关资料，求证实。
备注：DPI即 Dots Per Inch 的首字母缩写。两者概念是非常相似的，这个 Dot (点) 常用于打印机，移动设备用统一用PPI较清晰，本文后续不使用DPI。
1.2 逻辑分辨率
因为iPhone4的屏幕物理尺寸没有变化，但是清晰度提高了，其物理分辨率是之前的2倍，为了保证显示的内容和以前一样多一样大（这个极其必要），仅仅是更清晰，所以引入了 pixel density / Scale Factor 概念，以前这个值为1，现在为 2 了，因此引入了一个新概念：逻辑分辨率 = 物理分辨率 / pixel density。这样 iPhone4 的逻辑分辨率和以前一样。
备注：逻辑分辨率下的每个点也称为 Point 。
2. device independent pixels(设备独立像素)
2.1 安卓原生 —— dp/sp
- 1dp表示在屏幕像素点密度为
160ppi时1px长度，安卓开发中的最小长度单位。 - 会获取手机设置的字体大小，字体大小为100%时，1sp=1px
2.2 iOS原生 —— pt
pt有2种，一是Word和Web里的pt，多用于打印，Web开发不常用。
然后就是 iOS 的表示屏幕像素点密度为163ppi时1px的长度，iOS开发中的最小长度单位。
大雾：关于 iOS 中 pt 的误解 中说 1pt 约为 0.16毫米，是绝对错误的说法，应为在 2x 和 3x 下不一样。
| 型号 | 逻辑分辨率 | 物理分辨率 | Screen Diagonal | 物理宽高（计算得到） | Scale Factor | PPI | 1英寸=?pt |
|---|---|---|---|---|---|---|---|
| 6/6s | 375*667 | 750*1334 | 4.7" | 2.3"*4.1" | 2 | 326 | 163 |
| 6 Plus/6s Plus | 414*736 | 1242*2208 | 5.5" | 2.7"*4.8" | 3 | 401 | 153 |
| 12 | 390*844 | 1170*2532 | 6.06" | 2.54"*5.5" | 3 | 460 | 153 |
| 12 Pro Max | 428*926 | 1284*2778 | 6.68" | 2.8"*6.06" | 3 | 458 | 153 |
/**
* 物理高宽计算公式
*/
function size(w, h, diagonal) {
let width = Math.pow(diagonal ** 2 * w ** 2 / (w ** 2 + h ** 2), .5)
return [width, width * h / w]
}
那么在 iPhone 12 上的
2.3 Web开发
2.4 结论
结论：原生客户端开发，对于字体和高度，iOS用 pt ，安卓用 sp 。
