摘要：但是，在移動(dòng)端，看著分辨率高達(dá)的，在控制臺(tái)中卻只有的分辨率，似乎有點(diǎn)不合邏輯。對(duì)于手機(jī)，物理像素可以在手機(jī)說明書或者官網(wǎng)的參數(shù)配置中查到，而設(shè)備獨(dú)立像素打開控制臺(tái)選擇對(duì)應(yīng)機(jī)型后就可以看到當(dāng)然，也可以在控制臺(tái)中用上面的命令查看。

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

像素是一個(gè)經(jīng)常提到的概念，寫CSS的人都經(jīng)常會(huì)用到px作為單位。但是，在移動(dòng)端，看著分辨率高達(dá)1125x2436的iPhone X，在控制臺(tái)中卻只有375x812的分辨率，似乎有點(diǎn)不合邏輯。這些問題，都將在下面找到答案。

經(jīng)常用像素來描述分辨率，比如圖片的分辨率、視頻的分辨率、顯示器的分辨率、手機(jī)的分辨率等。不論是那種分辨率，用像素作為單位，其實(shí)就是用點(diǎn)的個(gè)數(shù)作為單位，一個(gè)像素，就是一個(gè)點(diǎn)，或者說是一個(gè)很小的正方形。

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

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

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

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

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

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

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

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

對(duì)于一臺(tái)顯示器或手機(jī)，其實(shí)是有2個(gè)分辨率的，這兩個(gè)分辨率是不同的，但也是相關(guān)的。

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

物理像素可以理解為硬件設(shè)備，設(shè)備獨(dú)立像素可以認(rèn)為是程序員控制顯示器的接口，中間會(huì)經(jīng)過操作系統(tǒng)來將設(shè)備獨(dú)立像素轉(zhuǎn)換成物理像素，用實(shí)際的物理像素點(diǎn)來顯示。所以，在編程中能獲取到的都是設(shè)備獨(dú)立像素，如CSS中的獲取的所有像素都是設(shè)備獨(dú)立像素，而物理像素對(duì)于程序員來說是透明的，咱沒法在代碼中看到的。至于怎么看，將在下文介紹。

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

廠家在宣傳自己的產(chǎn)品時(shí)，往往會(huì)拿物理像素說話，因?yàn)槲锢硐袼夭艜?huì)代表其工藝水平，才會(huì)吸引用戶花更多的錢去買。對(duì)于物理像素，一般在產(chǎn)品的官網(wǎng)參數(shù)里面都可以看到，也可以在屬性中查看。如對(duì)于我的Mac筆記本，在關(guān)于本機(jī)->顯示器中可以看到如下的信息，其物理分辨率大小為2560 x 1600。

要查看顯示器的設(shè)備獨(dú)立像素，作為寫前端的人，打開瀏覽器，再打開控制臺(tái)，敲一下代碼：

screen.width
screen.height

對(duì)于我的Mac，得到的值為1440 x 900。對(duì)于手機(jī)，物理像素可以在手機(jī)說明書或者官網(wǎng)的參數(shù)配置中查到，而設(shè)備獨(dú)立像素打開控制臺(tái)選擇對(duì)應(yīng)機(jī)型后就可以看到：

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

不管何種設(shè)備，一般都滿足：設(shè)備獨(dú)立像素 <= 物理像素

window.devicePixelRatio = 設(shè)備物理像素 / 設(shè)備獨(dú)立像素

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

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

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

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

而在800x600的顯示器上全屏?xí)r，圖片上點(diǎn)的數(shù)目不夠用了，這時(shí)，屏幕上的4個(gè)像素點(diǎn)只能顯示照片的一個(gè)像素點(diǎn)（為什么是4呢，因?yàn)橐粋€(gè)像素點(diǎn)可以看成是一個(gè)正方形，橫向和縱向都是2倍，所以2x2=4）。由于像素已經(jīng)是最小的單位了，不能再往下分了，所以就只能就近取色，所以最后的圖片看起來就會(huì)模糊。

這個(gè)原理與Retina屏幕顯示是一樣的。比如，對(duì)于一幅400x300的圖片，用CSS設(shè)定其寬高為400x300，CSS設(shè)定的是設(shè)備獨(dú)立像素。在普通屏幕上，CSS指定的400x300像素大小區(qū)域正好是400x300個(gè)物理像素點(diǎn)，圖片完美顯示，對(duì)應(yīng)上面的情況一；在Retina屏上，devicePixelRatio為2，CSS指定的400x300像素大小區(qū)域有800x600個(gè)物理像素點(diǎn)，對(duì)應(yīng)的就是上面的情況2，所以就會(huì)有模糊的情況。具體原理可以參考下面的圖（來自網(wǎng)絡(luò)）：

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

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

CSS的單位分兩種：絕對(duì)長度單位和相對(duì)長度單位。

cm：厘米

mm：毫米

in：英寸

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

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

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

之所以叫絕對(duì)長度單位，是因?yàn)樵谥挥衅胀ㄆ聊坏臅r(shí)代，相同的單位無論在何種設(shè)備上，顯示出來的長度都是一致的，并且1cm就是等于物理長度1厘米。而后來，由于Retina顯示屏的出現(xiàn)，絕對(duì)長度單位里面的“絕對(duì)”，是指單位之間關(guān)系是絕對(duì)固定的。比如，1in = 72pt和1in = 96px是永遠(yuǎn)固定不變的。關(guān)系不變，就需要選取其中一個(gè)作為基準(zhǔn)：

在打印機(jī)設(shè)備中，一般是以物理單位作為基準(zhǔn)，即1in對(duì)應(yīng)物理單位的1in，此時(shí)，1px的長度就是1/96in。所有單位都是與物理長度對(duì)應(yīng)的

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

之所以這種絕對(duì)長度不再絕對(duì)，就是因?yàn)槎啾秾蔚某霈F(xiàn)，使得像素點(diǎn)的物理尺寸縮小。于是，CSS也修改了這些單位的定義，目前已經(jīng)得到大多數(shù)設(shè)備的支持。關(guān)于這一點(diǎn)，可以參加CSS官方文檔：https://www.w3.org/TR/css-val...

相對(duì)于預(yù)定義的長度或特征，一般是相對(duì)于字體或者viewport，在移動(dòng)端適配中有很重要的作用

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

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

em：相對(duì)于最近父級(jí)font-size，所以會(huì)有層層嵌套的問題，每一層都是相對(duì)于最近父級(jí)

rem ：相對(duì)于html標(biāo)簽的font-size

vh：viewport高度的1/10

vw：viewport寬度的1/10

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

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

這里花了很大的篇幅去介紹像素，這個(gè)看起來簡單實(shí)際卻有點(diǎn)復(fù)雜但又必須弄清楚的東西，為后面的移動(dòng)端適配做基礎(chǔ)。