摘要：首先舉個(gè)例子，的像素分辨率為英寸。像素密度定義代表的就是像素密度指的是每英寸的長(zhǎng)度上排列的像素點(diǎn)數(shù)量。物理尺寸如圖可以知道，英寸也就指的是屏幕對(duì)角線的物理長(zhǎng)度。英寸是一個(gè)固定長(zhǎng)度，等于厘米。顯示效果如下如圖看出顯示要比清晰的多。

首先舉個(gè)例子，iphone6s的像素分辨率為1334x750,326ppi,4.7英寸。如圖
下面我們一個(gè)一個(gè)來(lái)解釋。

326ppi代表的就是像素密度(pixels per inch),指的是每英寸的長(zhǎng)度上排列的像素點(diǎn)數(shù)量。

a.屏幕分辨率

首先1334x750，代表的是屏幕分辨率，也就是說(shuō)iPhone6s的屏幕是由縱向像素1334*橫向像素750個(gè)像素點(diǎn)組成。單位pixel。

b.物理尺寸

如圖可以知道，4.7英寸也就指的是iPhone6s屏幕對(duì)角線的物理長(zhǎng)度。1英寸是一個(gè)固定長(zhǎng)度，等于2.54厘米。

像素密度=對(duì)角線分辨率/屏幕尺寸。如下
計(jì)算:勾股定理算出對(duì)角線的分辨率：√(13342+7502)

    對(duì)角線分辨率除以屏幕尺寸：√(13342+7502)/4.7≈440dpi。

像素密度越高，代表屏幕顯示效果越精細(xì)。Retina屏比普通屏清晰很多，就是因?yàn)镽etina屏幕像素密度高。最明顯的就是iPhone 3GS和iPhone 4的區(qū)別。屏幕尺寸一樣因?yàn)槠聊环直媛氏嗖钜槐端云聊幌袼孛芏纫蚕嗖钜槐丁ｏ@示效果如下

如圖看出iPhone4顯示要比iPhone 3gs清晰的多。根本原因是因?yàn)閕Phone3gs的1個(gè)像素點(diǎn)的大小相對(duì)于iPhone4來(lái)說(shuō)等于它屏幕的4個(gè)(2x2)像素大小。如下圖。

注意注意注意:這里的1像素指的是物理設(shè)備的1個(gè)像素點(diǎn)。也就是說(shuō)不同像素密度的物理設(shè)備的一個(gè)像素點(diǎn)的大小是不一樣的。也就意味著對(duì)于物理設(shè)備屏幕的單個(gè)像素點(diǎn)的大小是不是一個(gè)固定的大小。用稍微專業(yè)一點(diǎn)的話來(lái)說(shuō)就是，單個(gè)的設(shè)備像素的大小是不定的。

上面我們討論的是關(guān)于物理設(shè)備的像素密度(再次強(qiáng)調(diào):這里的像素就是物理像素或者說(shuō)是設(shè)備像素，對(duì)應(yīng)于像素密度不同的設(shè)備具體像素點(diǎn)的大小都是不一樣大的。像素密度越大，像素點(diǎn)越小，顯示的細(xì)節(jié)就越多越豐富。反之則情況剛好相反)。那么接下來(lái)我們要說(shuō)的幾個(gè)重要概念是什么呢？我們先從css像素與設(shè)備像素開始討論。

首先我們需要明確一點(diǎn):在我們編寫CSS的時(shí)候的px和設(shè)備自身的px是沒(méi)有任何關(guān)系的。

css pixel:瀏覽器使用的抽象單位，主要用來(lái)在網(wǎng)頁(yè)上繪制內(nèi)容。

device pixel:顯示屏幕的最小物理單位，每個(gè)dp包含自己的顏色、亮度。

既然css pixel與device pixel沒(méi)有任何關(guān)系，那么我們?cè)诰帉戫?yè)面時(shí)怎么設(shè)置多寬(用多少的css像素)的網(wǎng)頁(yè)才能適配不同的設(shè)備(才能覆蓋設(shè)備的像素)呢？？？為了解決這個(gè)問(wèn)題，我們?cè)僖胍粋€(gè)重要的概念viewport。

viewport翻譯過(guò)來(lái)就是視口的意思。viewport有兩種,一種是layout viewport,還有一種是visual viewport。這兩種viewport的大小都是以css像素進(jìn)行繪制的。

1.layout viewport:把layout viewport想象成為不會(huì)變更大小和形狀的大圖。現(xiàn)在想像你有一個(gè)小一些的框架，你通過(guò)它來(lái)看這張大圖。（可以理解為「管中窺豹」）這個(gè)小框架的周圍被不透明的材料所環(huán)繞，這掩蓋了你所有的視線，只留這張大圖的一部分給你。你通過(guò)這個(gè)框架所能看到的大圖的部分就是visual viewport。當(dāng)你保持框架（縮小）來(lái)看整個(gè)圖片的時(shí)候，你可以不用管大圖，或者你可以靠近一些（放大）只看局部。你也可以改變框架的方向，但是大圖（layout viewport）的大小和形狀永遠(yuǎn)不會(huì)變。
計(jì)算:document.documentElement.clientWidth/Height

2.visual viewport:是頁(yè)面當(dāng)前顯示在屏幕上的部分。用戶可以通過(guò)滾動(dòng)來(lái)改變他所看到的頁(yè)面的部分，或者通過(guò)縮放來(lái)改變visual viewport的大小。
計(jì)算:window.innerWidth/Height

當(dāng)你縮小或者放大頁(yè)面時(shí)，visual viewport的大小會(huì)發(fā)生變化。當(dāng)你放大頁(yè)面，能看到頁(yè)面的內(nèi)容也就越少，當(dāng)你縮小頁(yè)面能看到的頁(yè)面內(nèi)容也就越多。根本上是因?yàn)楫?dāng)你縮小或者放大網(wǎng)頁(yè)時(shí)，網(wǎng)頁(yè)上的css像素就變小或者變大了，但是layout viewport的大小是不變的。也就意味著，當(dāng)css像素變大時(shí)，layout viewport中能容納的單位css像素也就變少了，因此visual viewport的大小就變小了。反之也是一個(gè)道理。這個(gè)過(guò)程中，layout viewport并不會(huì)發(fā)生任何變化(當(dāng)然，在窗口的大小發(fā)生變化的時(shí)候，layout viewport的大小也會(huì)隨之變化，窗口越大能夠容納的CSS像素越多，layout viewport也就越大，反之亦然)。如圖

1:1

1:1.3

因此可以把layout viewport想象成為一個(gè)虛擬的"窗口"。窗口可大于或小于設(shè)備的可視區(qū)域(也就是visual viewport)，一般設(shè)備默認(rèn)layout viewport大于visual viewport。這樣不會(huì)破壞沒(méi)有針對(duì)設(shè)備的瀏覽器優(yōu)化的網(wǎng)頁(yè)的布局，用戶可以通過(guò)平移和縮放來(lái)看網(wǎng)頁(yè)的其他部分。

部分機(jī)型默認(rèn)layout viewport:

你也可以通過(guò)上面給出的document.documentElement.clientWidth/Height在chrome控制臺(tái)中進(jìn)行測(cè)試layout viewport的大小。

根據(jù)以上的討論我們知道了:

我們寫頁(yè)面時(shí)是在layout viewport上進(jìn)行的布局，用的是css像素，可以由document.documentElement.clientWidth/Height計(jì)算。(與程序員相關(guān))

各種設(shè)備的屏幕分辨率表示的像素是設(shè)備像素可以由screen.width/height計(jì)算。(與硬件產(chǎn)品相關(guān))

我們觀看頁(yè)面時(shí)是通過(guò)visual viewport進(jìn)行觀看的，用的也是css像素，可以由window.innerWidth/Height來(lái)計(jì)算。(與用戶行為相關(guān))

通過(guò)上面的討論，我們知道，屏幕的分辨率的設(shè)備像素與我們編寫頁(yè)面時(shí)使用的CSS像素并沒(méi)有什么直接關(guān)系。而且
問(wèn)題1.從大的方面來(lái)看:首先，我們編寫的CSS是在layout viewport中繪制。其次，從下圖可以看出，設(shè)備分辨率和layout viewport也沒(méi)有什么直接關(guān)系
問(wèn)題2.從小的方面來(lái)看:首先， CSS像素在不放大和縮小的情況下，在任何設(shè)備中的1個(gè)CSS像素都是一樣大的。其次，不同像素密度的設(shè)備，設(shè)備屏幕(與像素密度有關(guān))中的1個(gè)設(shè)備像素的大小是各不相同的。可以知道，在沒(méi)有進(jìn)行任何設(shè)置的情況下，單位設(shè)備像素與單位css像素也扯不上什么關(guān)系。

如果我們想要自己寫出來(lái)的頁(yè)面在各個(gè)設(shè)備下都工作良好，就會(huì)出現(xiàn)困難？因此為了讓他們之間扯上關(guān)系，我們便需要做一些設(shè)置。像下面這樣

每個(gè)設(shè)置對(duì)應(yīng)的意思

這樣設(shè)置了之后，我們的layout viewport的大小也就與設(shè)備大小相等了(高度上也是相等的)。如圖。既然它們相等那么可以推理得出此時(shí)的單位設(shè)備像素和單位CSS像素在縮放比例為1的情況下，也就是相等的了。

這時(shí)候我們顯示的頁(yè)面的屏幕和我們布局頁(yè)面的大小是一樣的，那么在進(jìn)行布局的時(shí)候，也就容易了很多。

知道了這樣設(shè)置后，對(duì)于我們布局來(lái)說(shuō)問(wèn)題也就不大了。
1.我們?cè)趌ayout viewport上布局，這樣設(shè)置后，layout viewport的大小等于設(shè)備屏幕的大小
2.不同像素密度的設(shè)備的單位設(shè)備像素大小的變化也就會(huì)同步引起單位CSS像素大小的變化。也就是說(shuō)，我們?cè)谟肅SS編寫網(wǎng)頁(yè)的時(shí)候，在不同像素密度的設(shè)備中的css像素大小是不一樣的是變化的。(這里一定要理解)。

但是，這里還有一個(gè)問(wèn)題，iphone6 plus 414這個(gè)寬度是從哪里來(lái)的呢？

Android和IOS都會(huì)通過(guò)轉(zhuǎn)換系數(shù)讓控件適應(yīng)屏幕的尺寸。而這個(gè)轉(zhuǎn)換系數(shù)就和最開始講的像素密度PPI有關(guān)。不同的PPI轉(zhuǎn)化系數(shù)不同。如圖

由圖可以知道iphone6 plus的屏幕分辨率為1242*2208，轉(zhuǎn)化系數(shù)為3。
1242/3=414。
414便由此而得，這是設(shè)備自身進(jìn)行的轉(zhuǎn)化，而我們?cè)O(shè)置的layout viewport的大小也就等于設(shè)備自身轉(zhuǎn)換后的大小。