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

基礎概念

dpi

每英寸所含有的畫素點的個數。

物理畫素

移動裝置出廠時，就具備的解析度，小米5 1920×1080 iphone6 1334×750

邏輯畫素

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(1920² x 1080²) / 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端的圖片通常是從伺服器獲取，那麼如果都統一使用最大的圖片，勢必會影響載入速度,所以根據實際使用情況，自己斟酌。