移動端 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 的應用在這塊作的是標杆。

 

各個平臺的一些細節確定有些區別，可是原理如上所述。

下篇將講一講：如何讓設計師和攻城獅更好的協同做業