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

iOS, Android 两个最流行的系统，运行这两款系统的设备千千万，他们的屏幕尺寸也是千千万，这可苦了设计师和攻城狮。 此文试着从原理层面及实践层面来分析下该问题。

基础概念

屏幕尺寸

这个很好理解，就是人们常说的屏幕几英寸，例如：iPhone 4 的屏幕大小3.5英寸，iPhone 5 的屏幕大小4.0英寸

分辨率

• 显示器分辨率

显示器的分辨率是通过像素大小来描述的。例如，如果显示器的分辨率与照片的像素大小相同，则按照 100% 的比例查看照片时，照片将填满整个屏幕。

• 打印机分辨率

打印机分辨率的测量单位是油墨点/英寸（也称作 dpi）。一般来说，每英寸的油墨点越多，得到的打印输出效果就越好。

• 图像像素尺寸、分辨率

像素尺寸测量了沿图像的宽度和高度的总像素数。分辨率是指位图图像中的细节精细度，测量单位是像素/英寸 (ppi)。每英寸的像素越多，分辨率越高。

手机的屏幕当然是显示器了，所以它的分辨率是指屏幕上有多少个像素，例如：iPhone 4 的分辨率 640 × 960 px，iPhone 5 的分辨率 640 × 1136 px

屏幕密度

厂商的说明书上一般都会以 ppi (pixel per inch) 为单位；Android 系统，用 dpi (dots per inch) 来表示。

与密度无关的单位

暂且称为逻辑像素，各家有各家的叫法。iOS 用 points 表示 ， Android 用 dp 表示，Web 用 CSS pixel 表示；所以再听到这些名词时，莫慌！说的都是一个东西。

倍率

iOS：常听到的 1X， 2X，3X ；

Android：常听到的 MDPI，HDPI，XHDPI，XXHDPI，XXXHDPI 这里边实际上是倍率的关系，MDPI : HDPI : XHDPI : XXHDPI : XXXHDPI = 1 : 1.5 : 2 : 3 : 4

Web：通过 JavaScript 调用 window.devicePixelRatio 即可获得

为啥谈倍率呢？这与上边的密度无关的单位结合起来可是很好的东东。且看下表

上表展示了，逻辑像素与屏幕像素的转换关系，同时，当逻辑像素大小为奇数时，在 Android、Web 平台 会有次像素的问题。所以，尽量用偶数咯。表头 横轴：倍率，纵轴：逻辑像素，无颜色的单元格内的数字的单位为pixel。

从逻辑像素转换到屏幕像素，当然是由系统完成。

这篇先写到这。

分辨率这个概念，请参看 photoshop文档