移动端 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 的应用在这块做的是标杆。

 

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

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