摘要：但是，在移動端，看著分辨率高達的，在控制臺中卻只有的分辨率，似乎有點不合邏輯。對于手機，物理像素可以在手機說明書或者官網的參數配置中查到，而設備獨立像素打開控制臺選擇對應機型后就可以看到當然，也可以在控制臺中用上面的命令查看。

最近在做移動端的開發，深入了解了下移動端適配的一些問題，加上自己的理解，記錄下來，寫一個小的系列博客，與大家分享。所有的問題，就開始從像素說起吧~

像素是一個經常提到的概念，寫CSS的人都經常會用到px作為單位。但是，在移動端，看著分辨率高達1125x2436的iPhone X，在控制臺中卻只有375x812的分辨率，似乎有點不合邏輯。這些問題，都將在下面找到答案。

經常用像素來描述分辨率，比如圖片的分辨率、視頻的分辨率、顯示器的分辨率、手機的分辨率等。不論是那種分辨率，用像素作為單位，其實就是用點的個數作為單位，一個像素，就是一個點，或者說是一個很小的正方形。

任何顯示設備，如電腦顯示器和手機屏幕，其實都是由很多個小點組成的。比如，我的顯示器分辨率是1920x1080，就表示顯示器橫向一共有1920個像素點，縱向一共有1080個像素點，每個像素點都可以多帶帶顯示一種顏色。于是，所有像素點顯示的顏色加起來，就是我們最后看到的效果。

至于每個像素點是多大，這就跟顯示器硬件的性能有關了。需要注意的是，屏幕大小和分辨率的高低并無直接關系：

相同大小的屏幕，分辨率并不一定就相同

屏幕大的顯示設備，分辨率并不一定就高，如iPhone X的分辨率高達2436×1125，就比我用的21英寸顯示器的1920x1080的分辨率還要高

現在常常會提到4K顯示器，就要求屏幕的橫向分辨率達到約4000像素，如3840x2160或4096×2160。很明顯，對于大小相同的屏幕，分辨率越高，像素點越多，每個像素點也就越小，成本也就越高。但是，分辨率高的最直觀感受，就是可以看更高清的圖片和視頻，顯示會更加清晰。

與上面類似，圖片和視頻中的分辨率，也是描述橫向和縱向分辨有多少個像素點。每個像素點表示一種顏色，所有顏色顯示出來，就是一張圖片。理論上，可以用數字完全描述一張圖片，如下面的例子：

#ddfd23, #234862 ..... #fab421
#ddfd23, #234862 ..... #fab421
......
#ddfd23, #234862 ..... #fab421
#ddfd23, #234862 ..... #fab421

每個像素點上的顏色，都用一個色值表示，如果圖片分辨率為400x300像素，那么橫向就有400個值，縱向是300個值。

對于一臺顯示器或手機，其實是有2個分辨率的，這兩個分辨率是不同的，但也是相關的。

上面所解釋的屏幕中的分辨率，其實都是物理像素，也就是廠家在生產顯示設備時就決定的實際點的個數。上面提到，對于不同的設備而言，物理像素點的大小是不一樣的，這樣就會帶來問題：舉個例子，21英寸顯示器的分辨率是1440x1080，5.8英寸的iPhone X的分辨率是2436×1125，我用CSS畫一條線，其長度是20px，如果都以物理像素作為度量單位，那么在顯示器上看起來正常，在iPhone X屏幕上就變得非常小，不是我們想要的結果。所以呢，為了解決這個問題，還需要一個新的度量單位，這個度量單位必須是與設備無關的，采用這個單位，無論在何種設備上，相同長度的線看起來都應該差不多，這就是設備獨立像素(device-independent pixels, dips )。我們在CSS中用的CSS像素，其實就是一種設備獨立像素，在Android或IOS開發中，人家就不能叫CSS像素了，不過意思還是一樣滴~

物理像素可以理解為硬件設備，設備獨立像素可以認為是程序員控制顯示器的接口，中間會經過操作系統來將設備獨立像素轉換成物理像素，用實際的物理像素點來顯示。所以，在編程中能獲取到的都是設備獨立像素，如CSS中的獲取的所有像素都是設備獨立像素，而物理像素對于程序員來說是透明的，咱沒法在代碼中看到的。至于怎么看，將在下文介紹。

物理像素是在出廠時就決定的，但是設備獨立像素其實是可調的。大家用電腦的時候，應該都試過調整分辨率，此時調整的實際就是設備獨立像素，比如Macbook可以這樣調整分辨率：https://support.apple.com/kb/...

廠家在宣傳自己的產品時，往往會拿物理像素說話，因為物理像素才會代表其工藝水平，才會吸引用戶花更多的錢去買。對于物理像素，一般在產品的官網參數里面都可以看到，也可以在屬性中查看。如對于我的Mac筆記本，在關于本機->顯示器中可以看到如下的信息，其物理分辨率大小為2560 x 1600。

要查看顯示器的設備獨立像素，作為寫前端的人，打開瀏覽器，再打開控制臺，敲一下代碼：

screen.width
screen.height

對于我的Mac，得到的值為1440 x 900。對于手機，物理像素可以在手機說明書或者官網的參數配置中查到，而設備獨立像素打開控制臺選擇對應機型后就可以看到：

當然，也可以在控制臺中用上面的js命令查看。此外，這里也提供一個網站：https://material.io/tools/dev...，但是貌似國內手機沒收錄，具體的機型，大家可以自行百度下，基本都可以查到的。

不管何種設備，一般都滿足：設備獨立像素 <= 物理像素

window.devicePixelRatio = 設備物理像素 / 設備獨立像素

通過window.devicePixelRatio，可以知道一個設備獨立像素用幾個物理像素點來表示。如iPhone X中，devicePixelRation為3，iPhone6/7/8中devicePixelRatio的為2。當然，devicePixelRation并不一定是整數，也有可能是1.5，2.25這些小數值。

經過我的實際測試，在手機模式下，上面這個公式基本都是成立的，而在電腦顯示器上，還有些問題。另外，當我調整電腦顯示器的分辨率時，無論調整出來的電腦顯示器分辨率為多少，在我的MacBook上，devicePixelRation的值都為2（理論上，調整電腦顯示器的分辨率，即調整了設備獨立像素，而物理像素是固定的，所以devicePixelRation的值會跟著改變猜對）。經查，這可能是devicePixelRation在不同平臺的定義不同造成的，所以目前，在移動端可以放心的用，在PC端還是慎用。

說完上面的概念，也許會有個疑惑：有一張400x300的圖片，分別放到400x300和800x600的顯示器上全屏顯示，會怎么樣呢？

先來看400x300的顯示器，由于是全屏顯示，正好圖片也是400x300的分辨率，兩者相等，于是很愉快的，顯示器上一個像素點就顯示照片上的一個像素，整個圖片完美的顯示出來了

而在800x600的顯示器上全屏時，圖片上點的數目不夠用了，這時，屏幕上的4個像素點只能顯示照片的一個像素點（為什么是4呢，因為一個像素點可以看成是一個正方形，橫向和縱向都是2倍，所以2x2=4）。由于像素已經是最小的單位了，不能再往下分了，所以就只能就近取色，所以最后的圖片看起來就會模糊。

這個原理與Retina屏幕顯示是一樣的。比如，對于一幅400x300的圖片，用CSS設定其寬高為400x300，CSS設定的是設備獨立像素。在普通屏幕上，CSS指定的400x300像素大小區域正好是400x300個物理像素點，圖片完美顯示，對應上面的情況一；在Retina屏上，devicePixelRatio為2，CSS指定的400x300像素大小區域有800x600個物理像素點，對應的就是上面的情況2，所以就會有模糊的情況。具體原理可以參考下面的圖（來自網絡）：

為了解決Retina屏幕的顯示問題，往往會用更高分辨率的圖片來代替，比如對于上面的情況，如果用800x600的圖片，那么在Retina屏幕上顯示就會非常完美，但是換到普通屏幕上，問題又來了：顯示器上的一個物理像素點要顯示照片上的4個像素點，裝不下了。這時候，會自動下采樣。下采樣之后的，看起來也不會有太大問題，但可能會有點色差或者缺少銳利度。

你可能在有的博客上看到，一個像素的長度是一英寸的1/96。這種解釋，貌似給了像素這個比較抽象的單位一個直觀的感受，但是現在來看，這個只能用來描述CSS像素，不能用來描述物理像素，而且，即使是描述物理像素，也不那么準確了。所以，在這里，有必要介紹一下CSS中的單位，順便解釋一下這個問題。

CSS的單位分兩種：絕對長度單位和相對長度單位。

cm：厘米

mm：毫米

in：英寸

pc(picas):一英寸的1/6

pt(points)：一英寸的1/72

px(pixels)：一英寸的1/96

之所以叫絕對長度單位，是因為在只有普通屏幕的時代，相同的單位無論在何種設備上，顯示出來的長度都是一致的，并且1cm就是等于物理長度1厘米。而后來，由于Retina顯示屏的出現，絕對長度單位里面的“絕對”，是指單位之間關系是絕對固定的。比如，1in = 72pt和1in = 96px是永遠固定不變的。關系不變，就需要選取其中一個作為基準：

在打印機設備中，一般是以物理單位作為基準，即1in對應物理單位的1in，此時，1px的長度就是1/96in。所有單位都是與物理長度對應的

而在顯示設備（電腦和手機）中，一般是以像素作為基準的。比如在iPhone X中，設備的寬度是2.79in（物理寬度），屏幕分辨率是1125物理像素，window.devicePixelRatio = 3，也就是3個物理像素表示一個CSS像素，所以iPhone X寬度的CSS像素是375px。此時，CSS單位的1in表示的實際長度是2.79 / 375 * 96in = 0.71424in，此時，CSS的1in并不表示物理長度1in

之所以這種絕對長度不再絕對，就是因為多倍屛的出現，使得像素點的物理尺寸縮小。于是，CSS也修改了這些單位的定義，目前已經得到大多數設備的支持。關于這一點，可以參加CSS官方文檔：https://www.w3.org/TR/css-val...

相對于預定義的長度或特征，一般是相對于字體或者viewport，在移動端適配中有很重要的作用

ex (x-height)：等于所用字體的小寫字母x的高度

ch (character)：等于所用字體的數字0的高度

em：相對于最近父級font-size，所以會有層層嵌套的問題，每一層都是相對于最近父級

rem ：相對于html標簽的font-size

vh：viewport高度的1/10

vw：viewport寬度的1/10

vmin：viewport寬高較小者的1/10

vmax：viewport寬高較大者的1/10

這里花了很大的篇幅去介紹像素，這個看起來簡單實際卻有點復雜但又必須弄清楚的東西，為后面的移動端適配做基礎。