####UI適配學習
基礎概念 #####屏幕尺寸 這個很好理解,就是人們常說的屏幕幾英寸, 例如: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 = 2 : 3 : 4 : 6 : 8
Web:通過 JavaScript 調用 window.devicePixelRatio即可獲得
爲啥談倍率呢?這與上邊的密度無關的單位結合起來可是很好的東東.且看下錶
表頭 橫軸:倍率,縱軸:邏輯像素,無顏色的單元格內的數字的單位爲pixel.
||1|1.5|2|3|4| -|-|-|-|-|-| |1 points|1|無|2|3|無 |1 dp|1|1.5|2|3|4 |1 css pixel|1|1.5|2|3|4
上表展示了,邏輯像素與屏幕像素的轉換關係,同時,當邏輯像素大小爲奇數時, 在 Android,Web平臺會有次像素的問題.所以,儘量用偶數咯.
從邏輯像素轉換到屏幕像素,當然是由系統完成. 分辨率這個概念, 請參看 photoshop文檔
常見設備尺寸 設備|平臺|屏幕尺寸(in)|長寬比|邏輯像素(dp)|物理像素(px)|倍率| -|-|-|-|-|-|-| Android One|Android|4.5 2.2 * 3.9|16:9|320 * 569|480 * 854|1.5| Nexus 5|Android|5.0 2.4 * 4.3|16:9|360 * 640|1080 * 1920|3| Samsung Galaxy S6|Android|5.1 2.5 * 4.4|16:9|360 * 640|1440 * 2560|4| iPhone 4|IOS|3.5 2.0 * 2.9|3:2|320 * 480|640 * 960|2| iPhone 5|IOS|4.0 2.0 * 3.5|16:9|320 * 568|640 * 1136|2| iPhone 6|IOS|4.7 2.3 * 4.1|16:9|375 * 667|750 * 1334|2| iPhone 6 Plus|IOS|5.5 2.7 * 4.8|16:9|414 * 736|1080 * 1920|3|
注意圖中的iPhone6 Plus的數據看起來很奇怪,414 * 736 * 3 = 1242 * 2208. 而物理像素卻是10801920,這是爲什麼呢? 實際上iPhone 6 Plus渲染出的圖片尺寸爲1242 * 2208 px,但是屏幕只有10801920px. 所以系統會對渲染出的圖進行壓縮.
從表中數據可以看出:
- 雖然物理像素各種各樣,但是邏輯像素還是相對統一的.
- 邏輯像素相接近的,屏幕尺寸也比較接近.
actually,邏輯像素就是爲了使UI在不同的屏幕上表現的一致. 即:相同單位的邏輯像素,在不同屏幕上的物理尺寸相同.
如何適配
- 爲不同倍率的屏幕提供對應的圖片資源 IOS平臺的2倍3倍圖 Android平臺的drawable-mdpi,drawable-hdpi,drawable-xhdpi等等 Web平臺,JavaScript根據倍率請求不同的圖片
- 使用邏輯像素作爲UI元素的長度單位 IOS:pt,Android:dp,Web:css pixel
- 爲不同尺寸的屏幕提供不同的佈局