一直以來，本人對移動端解析度、畫素等概念傻傻分不清，特查閱多位牛人部落格後總結如下要點，以便日後檢視。

文件來源

CSS畫素

    CSS畫素是沒有實際大小的抽象單位，它是一個相對長度，它相對的是電腦或手機顯示器的解析度。

但在不同的裝置或不同的環境中，1px所代表的大小是不同的,如下表：

同樣是一英寸，同樣都是畫素，為啥蘋果手機一英寸有469個畫素，華為只有424個畫素

結論：
1、由於在手機頁面上，頁面縮放比都是1，所以在手機端網頁上一個畫素就對應一個 dip（裝置邏輯畫素）
2、畫素的大小不是固定的，就像金箍，能變大能變小

裝置物理畫素

 在同一個裝置上，它的物理畫素個數是固定的，這是廠商在出廠時就設定好了的————即一個裝置的解析度是固定的

物理畫素與 dip 的比例即為網頁的縮放比例，如果網頁沒有縮放，那麼一個物理畫素就對應一個 dip（裝置邏輯畫素）;

DIP&DP&PT&SP 裝置無關畫素(邏輯畫素)

     隨著移動裝置螢幕PPI的不斷提高，對於開發者來說以前用物理畫素(Physical Pixel)來度量顯示元素的方法已經不奏效了。為了解決這個問題，兩大平臺都提出了抽象畫素的概念：iOS叫做PT（Point，顯示點），Android中叫做DP/DiP（Device independent Pixel，裝置無關畫素），如果沒有特殊說明，以下統一用DP來進行描述。
    SP（Scale-independent pixel）是縮放無關的畫素，與DP和PT一樣都是抽象畫素，只不過用於描述字型的大小。
 

結論：
1、dp是一個與裝置的硬體畫素無關的單位，一個 dp 在任意畫素密度的裝置螢幕上都佔據相同的空間

邏輯畫素和物理畫素的對應關係

IPhone手機邏輯畫素與物理畫素的對應關係如下圖：

Android手機邏輯畫素與物理畫素的對應關係如下表：

dpr 裝置畫素縮放比

   dpr(device pixel ratio 裝置畫素縮放比)官方的定義為：裝置物理畫素和裝置獨立畫素的比例，即：devicePixelRatio = 物理畫素 / 獨立畫素。
 

So my conclusions on the mobile side are:
1、devicePixelRatio is mostly trustworthy on most browsers.
2、On iOS devices, multiply devicePixelRatio by screen.width to get the physical pixel count.
3、On Android and Windows Phone devices, divide screen.width by devicePixelRatio to get the dips count.

譯文：

    在移動端我有如下結論
1、dpr在多數瀏覽器上還是非常可信的
2、在IOS裝置上，dpr*screen.width = physical pixel
3、在安卓和WP裝置上，dip = screen.width  / dpr
4、出現2和3的不同計算公式的根源在於，不同裝置的screen.width讀取出的值的含義不同，具體如下：物理畫素  邏輯畫素dip  章節

在移動端瀏覽器中以及某些桌面瀏覽器中，window物件都有devicePixelRatio這個屬性，但要注意的是，devicePixelRatio在不同的瀏覽器中還存在些許的相容性問題(如下圖)，所以我們現在還並不能完全信賴這個東西。

物理畫素

On iOS Retina devices, screen.width gives the width in dips. So both a retina and a non-retina iPad report 768 in portrait mode.
On the three Android devices, screen.width gives the width in physical pixels; 480, 720, and 800, respectively. All browsers on the devices use the same values. (Imagine if some browsers on the same device used dips and others physical pixels!)

譯文：
在iOS裝置上，screen.width的值為dip
在安卓以及Windows Phone裝置上，screen.width的值為物理畫素

邏輯畫素dip

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.

譯文：

當在頁面上設定了`<meta name="viewport" content="width=device-width">`後，`document.documentElement.clientWidth`在大部分瀏覽器下，得到的是佈局視區(layout viewport)的寬度，就等同於dip

iOS中處理PPI

首先規定在多高的PPI下1DP等於1px，並以這個PPI作為基準（1x multiplier），如果顯示裝置的PPI是基準PPI的2倍，那麼1DP等於2px（2x multiplier），其實就是簡單的小學乘法。

    規定：
        在iPhone系列中，3G/S為1x multiplier(163PPI)，其他為2x multiplier,Iphone6及以上為3x multiplier
        在iPad系列中，iPad 1代和2代為1x multiplier(132PPI)，其他為2x multiplier
        在iPad Mini系列中，iPad Mini一代為1x multiplier(163PPI)，其他為2x multiplier

Android處理PPI

Android系統定義的四種畫素密度

可以看出Android中mdpi與iOS中的1x multiplier所代表的PPI是一樣的，xhdpi與iOS的2x multiplier所代表的PPI一樣，如下圖

設計頁面

在設計和開發過程中，應該儘量使用邏輯畫素尺寸來思考介面

iPhone

    目前最多的是iPhone5/5s的螢幕。倍率為2，邏輯畫素320×568。上升勢頭最猛，未來有望登上第一的是iPhone 6的螢幕。倍率為2，邏輯畫素375×667。
    按照這兩種尺寸來設計，都是比較主流的做法。可以兼顧短一些的iPhone 4s，大一點的6 plus也不會過於空曠。
    不過在切圖的時候要注意，由於iPhone 6 plus的3倍圖是由2倍圖放大而來，所以點陣圖要注意保證清晰。 

Android

  如今的Android螢幕邏輯畫素已經趨於統一了：360×640

手機端Web網頁

 手機端網頁比較流行的做法是按照iPhone 5的尺寸來設計。倍率2，邏輯畫素320×568。
 這樣的做法比較實在，倍率2的螢幕無論在iOS還是Android方面都是主流，而且又是2倍螢幕中邏輯畫素最小的。所以圖片的尺寸可以保持在較小的水平，頁面載入速度快。當然，缺點就是在倍率3的裝置上看，圖片不是特別清晰。
 如果追求圖片質量，願意犧牲載入速度，那麼可以按照最大的螢幕來設計。也就是iPhone 6 plus的尺寸，倍率3，邏輯畫素414×736。

總結

    真正決定顯示效果的，是邏輯畫素尺寸。為此，iOS和Android平臺都定義了各自的邏輯畫素單位。

    設計移動版web頁面時，手機端網頁比較流行的做法是按照iPhone 5的尺寸來設計。倍率2，邏輯畫素320×568, 即設計的頁面大小為：640px × 1136px

附：css中的1px並不總等於裝置的1px

畫素只是一個抽象的單位，在不同的裝置或不同的環境中，css中的1px所代表的裝置物理畫素是不同的。
在為桌面瀏覽器設計的網頁中，css的1個畫素往往都是對應著電腦螢幕的1個物理畫素,所以我們無需對這個津津計較，但在移動裝置上，必須弄明白這點。
在早先的移動裝置中，螢幕畫素密度(PPI)都比較低，如iphone3，它的解析度為320x480，在iphone3上，一個css畫素確實是等於一個螢幕物理畫素的。後來隨著技術的發展，移動裝置的螢幕畫素密度越來越高，從iphone4開始，蘋果公司便推出了所謂的Retina屏，解析度提高了一倍，變成640x960，但螢幕尺寸卻沒變化，這就意味著同樣大小的螢幕上，畫素卻多了一倍，這時，一個css畫素是等於兩個物理畫素的。其他品牌的移動裝置也是這個道理。例如安卓裝置根據螢幕畫素密度可分為ldpi、mdpi、hdpi、xhdpi等不同的等級，解析度也是五花八門，安卓裝置上的一個css畫素相當於多少個螢幕物理畫素，也因裝置的不同而不同，沒有一個定論。
還有一個因素也會引起css中px的變化，那就是使用者縮放。例如，當用戶把頁面放大一倍，那麼css中1px所代表的物理畫素也會增加一倍；反之把頁面縮小一倍，css中1px所代表的物理畫素也會減少一倍。