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