Topwo博客-从设计稿到屏幕显示的完整适配流程

您现在的位置是：Topwo博客>>Android文章

从设计稿到屏幕显示的完整适配流程

发布时间：2025-11-18作者：Topwo来源：原创点击：4

从设计稿到屏幕显示的适配流程。以下是4层系统适配：

## 完整适配流程（4层）

### 【第1层】Android 系统 DPI 配置

**配置位置：** `/system/build.prop`，`adb shell getprop ro.sf.lcd_density`，`adb shell dumpsys display`

| 设备 | ro.sf.lcd_density | 物理屏幕 |
|------|------------------|---------|
| 3399 | 213 | 3840×2160 |
| 3588 | 140 | 3840×2160 |

---

### 【第2层】Android DisplayMetrics 计算

**计算公式：**
```
scale = ro.sf.lcd_density / 160
逻辑宽度 = 物理宽度 / scale
逻辑高度 = 物理高度 / scale
```

**3399设备计算：**
```
scale = 213 / 160 = 1.33125
逻辑宽度 = 3840 / 1.33125 = 2884.5
逻辑高度 = 2160 / 1.33125 = 1622.53
```

**3588设备计算：**
```
scale = 140 / 160 = 0.875
逻辑宽度 = 3840 / 0.875 = 4388
逻辑高度 = 2160 / 0.875 = 2468
```

---

### 【第3层】React Native Dimensions API

**数据来源：** Android `DisplayMetrics`

**3399设备：**
```javascript
Dimensions.get('screen')
// {
//   width: 2884.5,      // ← DisplayMetrics.widthPixels
//   height: 1622.53,    // ← DisplayMetrics.heightPixels
//   scale: 1.33125      // ← DisplayMetrics.density
// }
```

**3588设备：**
```javascript
Dimensions.get('screen')
// {
//   width: 4388,        // ← DisplayMetrics.widthPixels
//   height: 2468,       // ← DisplayMetrics.heightPixels
//   scale: 0.875        // ← DisplayMetrics.density
// }
```

---

### 【第4层】React Native 渲染到屏幕

**渲染公式：**
```
物理像素 = 逻辑像素 × scale
```

**示例：设计稿 600px 按钮**

**3399设备：**
```
应用设置：600px（逻辑）
  ↓
渲染转换：600 × 1.33125 = 799px（物理）
  ↓
屏幕显示：799 物理像素
```

**3588设备：**
```
应用设置：600px（逻辑）
  ↓
渲染转换：600 × 0.875 = 525px（物理）
  ↓
屏幕显示：525 物理像素
```

---

## 关键对比

| 项目 | 3399设备 | 3588设备 | 说明 |
|------|---------|---------|------|
| **系统DPI** | 213 | 140 | 系统配置 |
| **Scale** | 1.33125 | 0.875 | 213/160 vs 140/160 |
| **逻辑尺寸** | 2884.5×1622.53 | 4388×2468 | 物理/scale |
| **600px显示** | 799px | 525px | 逻辑×scale |

---

## 核心问题

两个设备连接同一物理屏幕（3840×2160），但：
- 系统DPI配置不同（213 vs 140）
- 导致逻辑尺寸不同（2884.5 vs 4388）
- 导致相同逻辑像素显示为不同物理像素（799px vs 525px）

下一篇：cat /d/dri/0/summary