px、dpi、dp、in…对于这些移动端比较容易混淆的概念, 有必要做个笔记记录下.

更新

[2020-3-13]

  • Initial release

px

  • 物理像素点
  • 不同设备的像素数不会变, 但是在大分辨率设备上会缩小, 反之放大

dpi

  • 屏幕密度
  • 每英寸距离的物理像素点(px)个数, 值越大, 越清晰

dpi 计算方式

1
2
3
4
5
6
7
8
9
const 分辨率 = {
  width: 1080,
  height: 1920
};
const 屏幕尺寸 = 6.1;

const dpi =
  Math.sqrt(Math.pow(分辨率["width"], 2), Math.pow(分辨率[("height", 2)])) /
  6.1;

ppi

  • 图像分辨率

pt

  • 逻辑像素
  • iOS 的统一开发基本单位(pt = (屏幕像素分辨率ppi / 独立像素分辨率dpi)px)

in

  • 英寸
  • 1in = 2.54cm = 72pt

屏幕尺寸

  • 手机屏幕对角线的长度
  • iPhone6 -> 4.7 英寸; iPhone11 -> 6.1 英寸

分辨率

  • 手机屏幕垂直和水平方向上的物理像素(px)个数
  • iPhone6 -> 1334 _ 750; iPhone11 -> 1792 _ 828

图示

手机屏幕尺寸表

参考