移動前端適配—邏輯像素和物理像素

基礎概念
dpi
每英寸所含有的像素點的個數。

物理像素

移動設備出廠時，就具有的分辨率，小米5 1920x1080 iphone6 1334x750

邏輯像素

Give your page a <meta name="viewport" content="width=device-width">, read out document.documentElement.clientWidth, and most browsers will give you the width of the layout viewport, which now equals the dips width.

當你在html設置了<meta name="viewport" content="width=device-width">，那麼頁面就會以移動設備的dpis width做爲邏輯像素。

dpis width & scale
dpis width 如何得出？

你先須要計算dpi
小米5爲例， sqrt(19202 x 10802) / 5.15(屏幕的物理尺寸) = 427.7
計算scale
scale = 427.7 / 160 約等於 3.(這個計算是針對於android手機，不過ios也相似，至少目前的機型都符合這個計算，有清楚的大佬能夠告知)
android 以160的倍數做爲分隔點，來劃分不一樣手機邏輯像素的縮放比例。
160 mdpi
320 hdpi

480 xhdpi

計算dpis width 也就是 邏輯像素
dpis width = 1080 / 3 = 360
那麼結論來了
開發時其實只須要考慮邏輯像素，android 中 dp單位和移動前端中的px是同樣的，ios中用的也是邏輯像素。

那麼開發時，圖片咱們改如何選擇呢？
1280 x 720 、1920 x 1080 、2560 x 1440,這物理分辨率不一樣的手機之間有什麼區別？

仍是以小米5爲例，邏輯像素是360，那麼其實對於小米5來講360px(物理像素)的圖片就能夠正常顯示，而且不會拉伸，那麼爲了讓圖片的色彩更加好，可使用720px(物理像素)的圖片或者是1080px(物理像素)的圖片。

可是360的邏輯像素只是小米5的，不一樣手機之間存在差別性，爲了讓全部手機上面的圖片較爲正常的顯示，那麼應該選取一個物理像素較高的圖片。

android端一般在本地準備了多套的圖，根據不一樣scale來選擇不一樣的圖片，以便在全部手機上都能較好的顯示，同時保證了性能與展現效果，固然你能夠選擇僅僅使用一張最大的圖，但代價即是內存佔用和性能問題。

移動web端更是如此，由於移動web端的圖片一般是從服務器獲取，那麼若是都統一使用最大的圖片，勢必會影響加載速度,因此根據實際使用狀況，本身斟酌。

舉個栗子

以iphone6來講,

物理像素分辨率: 750 * 1334
設備獨立像素分辨率也就是邏輯像素分辨率 : 375 * 667
設備像素比: 2

無論是高清屏幕仍是普通屏幕,一個1*1 css像素那麼大的物理尺寸是同樣的,區別在於高清屏上一個一個1*1 css像素那麼大的地方,對應2*2個物理像素,因此很清晰。

在普通屏幕下1個css像素(1*1)對應1個物理像素(1*1)

在高清屏幕下1個css像素(1*1)對應4個物理像素(2*2)

不知道看完這個例子,你是否能理解這些叫法的區別。

補充說明:

物理像素(physical pixel): 物理像素越大,屏幕越清晰。
設備獨立像素(density-independent pixel) : 也叫密度無關像素。這個設備獨立像素,就是你眼睛看到的手機大小有關。
2個手機看上去同樣大? 那他們設備獨立獨立像素就是同樣的。也就是說我無論你高清屏仍是什麼**屏設備獨立像素只跟我這個設備看上去大不大有關。

設備看上去很大? 那設備獨立像素就大 ; 設備看上去很小? 那設備獨立像素就小

因此我以爲設備獨立像素(density-independent pixel)。這個翻譯比較貼切也好理解。只跟設備看上去的大小相關。

不少翻譯也管設備獨立像素叫作: 邏輯像素 、