移動端 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文檔