移动端 UI 适配最佳实践（中）

上篇谈到了一些基础概念：屏幕密度、逻辑像素什么的，接下来继续探讨

常见设备尺寸

更全的数据请参考Google 统计

说明：图中的 iPhone 6 Plus 数据看起来有些蹊跷，414 x 736 * 3 = 1242 x 2208，而物理像素倒是 1080 x 1920 ，这是为什么？实际上 iPhone 6 Plus 渲染出的图片尺寸为 1242 x 2208 px，但屏幕只有 1080 x 1920 px，因此系统会对渲染出的图进行压缩。

附：iOS对欢迎页的尺寸说明

从表中数据能够看出：

1. 虽然物理像素各类各样，可是逻辑像素仍是相对统一的。

2. 逻辑像素相接近的，屏幕尺寸也比较接近。

实际上，逻辑像素就是为了使 UI 在不一样的屏幕上的表现一致。即：相同单位的逻辑像素，在不一样的屏幕上的物理尺寸相同。来张图吧，一图胜前言。

UI 元素的高度为200逻辑像素，在倍率为1的屏幕上，高度为200 px，在倍率为2的屏幕上，高度为400px；但他们的物理尺寸都是同样的。

说了这么多，该切入正题了！

如何适配

前面作了不少铺垫，逻辑像素、倍率等等，是时候展示他们的用武之地咯

• 为不一样倍率的屏幕提供对应的图片资源

iOS 平台的 @2X , @3X 

Android 平台的 drawable-mdpi , drawable-hdpi , drawable-xhdpi , drawable-xxhdpi 等等

Web 平台，JavaScript 根据倍率请求不一样的图片

• 使用逻辑像素做为 UI 元素的长度单位

iOS : pt , Android : dp , Web : px

• 为不一样尺寸的屏幕提供不一样的布局

Android 平台支持根据尺寸来选用不一样的布局，其余平台不太清楚。题外话：好比 适配平板和手机，国内大部分的应用都是一套布局，平板就是手机的放大版，可能大部分团队都疲于产品的迭代吧。Google 的应用在这块作的是标杆。

 

各个平台的一些细节确定有些区别，可是原理如上所述。

下篇将讲一讲：如何让设计师和攻城狮更好的协同做业