關於移動端像素的顯示問題

在移動端開發的過程當中你們都會發現，移動端的顯示通常與桌面端的不同。好比在iphone6上顯示一個1334x750像素大小塊狀元素，雖然在蘋果官網上iphone6標稱的屏幕像素密度是1334x750規格，可是咱們卻發現這個1334x750像素大小的塊狀元素卻不能鋪滿整個屏幕。那究竟是爲何呢？下面從幾個方面來做探討。

像素密度（PPI）

PPI(Pixel Per Inch)，即表示每英寸有多少像素，相似於人口密度和建築密度，以下圖舉例了幾種PPI的表示。

以iphone6爲例，通常像素密度的計算公式爲：
Math.sqrt(1366*1366 + 640*640)

可是要計算這個PPI，那麼咱們先要知道設備的屏幕上到底有多少個像素，也就是Pixel Per Inch 中的第一個Pixel。

設備像素（DP）&& 設備像素比（DPR）

設備像素（Device pixel），也稱物理像素（Physical pixel），也就是本文一開始提到iphone6的屏幕規格。像素密度中所指的像素就是設備像素，對於通常的顯示設備來講，一個像素對應着屏幕上的一個發光點，所以PPI也稱爲DPI（dots per inch），可是這僅在顯示設備上纔等價，好比在打印機上就不同了。

因爲市面上每一臺手機的屏幕規格不同，有的是720P，有的是1080P，甚者是2K等等，這些設備的屏幕有些像素多，有些像素少，若是一樣顯示一個像素的話，則會出現像如下的狀況：

越高PPI的屏幕，顯示一個像素點的面積就越小，一張由4x4個像素點組成的圖顯示在PPI爲64的屏幕上，那麼換到256PPI的屏幕上顯示則會縮小爲原來大小的一半。

反過來，若是要在PPI爲256的屏幕上顯示效果與PPI爲64的屏幕同樣，那麼得要把圖片放大2倍。

所以配有高清屏幕的手機，廠商爲了其設備的可用性，即圖標和文字能夠被正確識別和準確點擊，就必須保證各種素材在其設備上的顯示與標清設備同樣，而這個解決方法就是把全部尺寸都放大若干倍。這個放大比例就叫做設備像素比(Device Pixel Ratio, DPR)，通常DPR對應着下面這個表：

	ldpi	mdpi	hdpi	xhdpi
ppi	120	160	240	320
dpr	0.75	1.0	1.5	2.0

所以高清設備上應該配有高清圖片顯示，否則圖片在高清設備上放大後沒有足夠的像素顯示其細節，那麼這張圖片就會變得看起來很模糊。

CSS像素

講了這麼多概念，彷彿仍是沒有很好地解釋文章開頭的問題。下面討論完CSS像素後估計你們會有一個比較清晰的概念。

咱們通宵在寫CSS的時候會用到像素單位px，可是這個像素單位並不一直是與設備像素一一對應，也就是說在CSS中1px（像素）不是對應着設備屏幕中的一個像素點。爲了與設備像素區別，CSS中所指的像素px咱們通常稱爲CSS像素。也就是說CSS像素是一個虛擬的、相對的單位。

例如在頁面上畫一個300px寬的塊元素，在通常的顯示器下它只會佔屏幕的一部分，但若是咱們手動地去放大頁面，很快這個塊狀元素也會充滿整個頁面。由此說明，通常狀況下CSS像素與系統分辨率下的像素大小相等，即在標清設備中，一個CSS像素應該是與一個設備像素大小相等的。可是是高清設備或者用戶縮放的過程當中，一個CSS像素也有可能等於多個設備像素。

舉另一個例子，在移動原生應用開發中，若是必須以一個設備像素爲單位進行開發，那將會是一件很是痛苦的事，由於不是每一臺移動設備的系統分辨率都是對應着一個設備像素，有的是1:2，有的是1:2.46，正是由於有這種差別，在安卓開發中會有例如dp,dt這種單位（在iOS中會有pt單位），當咱們給一個元素定義大小時，只須要給定一個dp值，系統將會根據這個值再與系統分辨率與設備像素的比值（即DPR）進行換算，最終計算出顯示在屏幕上的實際設備像素。

上面所指出的dp這種抽象單位稱爲設備無關像素（device independent pixel）。固然CSS像素也屬於設備無關像素，咱們在寫CSS像素的時候，不用關心一個CSS像素對應着多少個設備像素，系統會自動地根據DPR來幫咱們換算好。咱們要關心的只是如何保證網頁元素由於系統換算而致使被放大的時候下，還能清晰地展現在設備上。

視口（Viewport）

正常來講，在移動端打開一個頁面，若是瀏覽器先會以正常的比例來渲染頁面，而後再自動地設置一個比例來縮放頁面，目的是爲了讓內容更好地展現出來，即頁面內容恰好鋪滿整個手機屏幕，固然若是頁面沒有禁止掉用戶縮放的話，你也能夠用兩個手指把頁面縮放回原始的比例。這整個過程就是經過視口（viewport）來實現的，原始頁面渲染好後經過視口縮放使得與系統寬度同樣，從而能夠完整地展現頁面。

(圖片來自tgideas團隊博客)

咱們能夠經過在content中添加inital-scale屬性來控制渲染時視窗的縮放比例，把它設置爲1則無縮放。

<meta name="viewport" content="initial-scale=1">

咱們也能夠定義device-width屬性來控制viewport的寬度

<meta name="viewport" content="width=device-width">

通常在移動開發中咱們會設置不容許用戶縮放，並把最大、最小縮放比設爲1

<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">

總結（Summary）

經過連續幾天的翻閱資料與探索，終於完整地對移動開發最入門的地方有了準確的理解，以前也只是一直把meta裏的代碼直接複製過來用就是了，一直沒去弄清楚，此次趁着有空而且手上恰好有相關的資料，一併總體地走一遍，最後記錄成此文檔，但願對往後甚至會對你們有幫助。

參與資料：

1.深刻了解viewport和px

2.高性能響應式Web開發實戰