DP(device pixels)

設(shè)備像素也被稱作為物理像素野蝇，它表示顯示設(shè)備的真實(shí)像素，此像素是設(shè)備的固有屬性位喂，也就是說(shuō)浪耘，從出廠的那一刻乱灵，設(shè)備像素已經(jīng)固定塑崖，不會(huì)再發(fā)生改變。單位pt痛倚。

分辨率

通常使用分辨率來(lái)描述設(shè)備像素规婆，例如1920*1080，表示設(shè)備橫向有1920個(gè)像素點(diǎn)蝉稳，縱向有1080個(gè)像素點(diǎn)抒蚜。

屏幕尺寸

購(gòu)買電視或者手機(jī)等設(shè)備的顯示器都有一個(gè)屏幕尺寸參數(shù)，比如55英寸耘戚，它既不是顯示器的寬度也不是高度嗡髓，而是對(duì)角線的長(zhǎng)度。

PPI(pixels per inch)

每英寸像素取值收津，更確切的說(shuō)法應(yīng)該是像素密度饿这，也就是衡量單位物理面積內(nèi)擁有像素值的情況浊伙。
已知屏幕分辨率和主對(duì)角線的尺寸，則ppi等于以iphone 6為例：

var 斜邊尺寸 = V(1920^2+1080^2) V代表開(kāi)根號(hào) 
var ppi = 斜邊尺寸/5.5 
ppi = 401ppi

我們知道长捧，ppi越高嚣鄙，每英寸像素點(diǎn)越多，圖像越清晰串结；我們可以類比物體的密度哑子，密度越大，單位體積的質(zhì)量就越大肌割，ppi越高卧蜓，單位面積的像素越多。

DIP(Device independent Pixel)

設(shè)備獨(dú)立像素把敞，也稱為邏輯像素烦却，簡(jiǎn)稱dip。

由來(lái)

隨著技術(shù)的進(jìn)步先巴，很小的屏幕能容納很高的物理像素其爵，比如1920*1080以前只能應(yīng)用于大的顯示器，現(xiàn)在可能被容納于一個(gè)小的移動(dòng)端設(shè)備中伸蚯。如果我們直接使用物理像素摩渺，看如下代碼：

div {
  width:200px;
  height:100px;
}

iPhone 3和iPhone 4，屏幕尺寸一樣剂邮，后者的像素密度是前者的兩倍摇幻，如果使用物理像素作為單位，那么div的寬度視覺(jué)上iPhone 4是iPhone 3的一半挥萌，所以使用物理像素在web中設(shè)置尺寸是不合理的绰姻。因此操作系統(tǒng)定義設(shè)備獨(dú)立像素，用設(shè)備獨(dú)立像素定義的尺寸引瀑，不管屏幕的參數(shù)如何狂芋，都能以合適的大小顯示。iPhone 3物理像素是320*480憨栽，iPhone 4的物理像素是640*960帜矾，但是它們的設(shè)備獨(dú)立像素都是320*480，iPhone 4用4個(gè)物理像素表示1個(gè)設(shè)備獨(dú)立像素（橫向2個(gè)物理像素表示1個(gè)設(shè)備獨(dú)立像素屑柔，縱向2個(gè)物理像素表示一個(gè)設(shè)備獨(dú)立像素）屡萤，這一切都是由操作系統(tǒng)控制。
設(shè)備獨(dú)立像素可以由如下代碼獲鹊稹：

screen.width //寬度
screen.height //高度

PX(CSS pixels)

虛擬像素死陆，可以理解為“直覺(jué)”像素，在web中我們所設(shè)置的像素都是CSS像素唧瘾，CSS像素的單位是px措译。
在CSS規(guī)范中迫像，長(zhǎng)度單位可以分為兩類，絕對(duì)(absolute)單位以及相對(duì)(relative)單位瞳遍。px是一個(gè)相對(duì)單位闻妓，相對(duì)的是設(shè)備像素(device pixel)。

在沒(méi)有縮放的情況下掠械，1個(gè)css像素等同于一個(gè)設(shè)備獨(dú)立像素由缆。

CSS像素在視覺(jué)上是很容易改變大小的，比如縮放瀏覽器頁(yè)面猾蒂，就是改變的CSS像素均唉，當(dāng)放大一倍，那么一個(gè)CSS像素在橫向或者縱向上會(huì)覆蓋兩個(gè)設(shè)備獨(dú)立像素肚菠。例如寬度100px像素舔箭，當(dāng)頁(yè)面放大一倍，它會(huì)在橫向上由原本占據(jù)100個(gè)設(shè)備獨(dú)立像素蚊逢，變成占據(jù)200個(gè)設(shè)備獨(dú)立像素层扶；如果縮小，則恰好相反烙荷，只能占據(jù)50個(gè)設(shè)備獨(dú)立像素镜会。

DPR(device pixels ratio)

設(shè)備像素比dpr描述的是未縮放狀態(tài)下，設(shè)備像素和設(shè)備獨(dú)立像素的比例關(guān)系终抽。在JS中可以通過(guò)window.devicePixelRatio獲取戳表。

DPR = 設(shè)備像素/設(shè)備獨(dú)立像素

理解

知道設(shè)備像素比之后，我們就可以將程序中使用到的CSS像素轉(zhuǎn)換為設(shè)備像素昼伴。
設(shè)備像素比(dpr) 是指在移動(dòng)開(kāi)發(fā)中1個(gè)css像素占用多少設(shè)備像素匾旭，如2代表1個(gè)css像素用2x2個(gè)設(shè)備像素來(lái)繪制。
設(shè)備像素比(dpr)圃郊，公式為1px = (dpr)^2 * 1dp价涝，可以理解為1px由多少個(gè)設(shè)備像素組成。

Viewport

PPK的關(guān)于三個(gè)viewport的理論

ppk大神認(rèn)為描沟，移動(dòng)設(shè)備上有三個(gè)viewport飒泻。
首先鞭光，移動(dòng)設(shè)備上的瀏覽器認(rèn)為自己必須能讓所有的網(wǎng)站都正常顯示吏廉，即使是那些不是為移動(dòng)設(shè)備設(shè)計(jì)的網(wǎng)站。但如果以瀏覽器的可視區(qū)域作為viewport的話惰许，因?yàn)橐苿?dòng)設(shè)備的屏幕都不是很寬席覆，所以那些為桌面瀏覽器設(shè)計(jì)的網(wǎng)站放到移動(dòng)設(shè)備上顯示時(shí)，必然會(huì)因?yàn)橐苿?dòng)設(shè)備的viewport太窄汹买，而擠作一團(tuán)佩伤，甚至布局什么的都會(huì)亂掉聊倔。
也許有人會(huì)問(wèn)，現(xiàn)在不是有很多手機(jī)分辨率都非常大嗎生巡，比如768x1024耙蔑，或者1080x1920這樣，那這樣的手機(jī)用來(lái)顯示為桌面瀏覽器設(shè)計(jì)的網(wǎng)站是沒(méi)問(wèn)題的吧孤荣？首先甸陌，css中的1px并不是代表屏幕上的1px，你分辨率越大盐股，css中1px代表的物理像素就越多钱豁，devicePixelRatio的值也越大，這很好理解疯汁，因?yàn)槟惴直媛试龃罅松撸聊怀叽绮](méi)有變大多少，必須讓css中的1px代表更多的物理像素幌蚊，才能讓1px的東西在屏幕上的大小與那些低分辨率的設(shè)備差不多谤碳，不然就會(huì)因?yàn)樘《床磺濉Ｋ栽?code>1080x1920這樣的設(shè)備上溢豆，在默認(rèn)情況下估蹄，也許你只要把一個(gè)div的寬度設(shè)為300多px（視devicePixelRatio的值而定），就是滿屏的寬度了沫换〕粢希回到正題上來(lái)，如果把移動(dòng)設(shè)備上瀏覽器的可視區(qū)域設(shè)為viewport的話讯赏，某些網(wǎng)站就會(huì)因?yàn)?code>viewport太窄而顯示錯(cuò)亂垮兑，所以這些瀏覽器就決定默認(rèn)情況下把viewport設(shè)為一個(gè)較寬的值，比如980px漱挎，這樣的話即使是那些為桌面設(shè)計(jì)的網(wǎng)站也能在移動(dòng)瀏覽器上正常顯示了系枪。ppk把這個(gè)瀏覽器默認(rèn)的viewport叫做layout viewport。

這個(gè)layout viewport的寬度可以通過(guò)document.documentElement.clientWidth來(lái)獲取磕谅。

然而私爷，layout viewport的寬度是大于瀏覽器可視區(qū)域的寬度的，所以我們還需要一個(gè)viewport來(lái)代表瀏覽器可視區(qū)域的大小膊夹，ppk把這個(gè)viewport叫做visual viewport衬浑。visual viewport的寬度可以通過(guò)window.innerWidth來(lái)獲取。

現(xiàn)在我們已經(jīng)有兩個(gè)viewport了：layout viewport和visual viewport放刨。但瀏覽器覺(jué)得還不夠工秩，因?yàn)楝F(xiàn)在越來(lái)越多的網(wǎng)站都會(huì)為移動(dòng)設(shè)備進(jìn)行單獨(dú)的設(shè)計(jì)，所以必須還要有一個(gè)能完美適配移動(dòng)設(shè)備的viewport。所謂的完美適配指的是助币，首先不需要用戶縮放和橫向滾動(dòng)條就能正常的查看網(wǎng)站的所有內(nèi)容浪听；第二，顯示的文字的大小是合適眉菱，比如一段14px大小的文字迹栓，不會(huì)因?yàn)樵谝粋€(gè)高密度像素的屏幕里顯示得太小而無(wú)法看清，理想的情況是這段14px的文字無(wú)論是在何種密度屏幕俭缓，何種分辨率下迈螟，顯示出來(lái)的大小都是差不多的。當(dāng)然尔崔，不只是文字答毫，其他元素像圖片什么的也是這個(gè)道理。ppk把這個(gè)viewport叫做ideal viewport季春，也就是第三個(gè)viewport——移動(dòng)設(shè)備的理想viewport洗搂。

ideal viewport并沒(méi)有一個(gè)固定的尺寸，不同的設(shè)備擁有有不同的ideal viewport载弄。所有的iphone的ideal viewport寬度都是320px耘拇，無(wú)論它的屏幕寬度是320還是640，也就是說(shuō)宇攻，在iphone中惫叛，css中的320px就代表iphone屏幕的寬度。

但是安卓設(shè)備就比較復(fù)雜了逞刷，有320px的嘉涌，有360px的，有384px的等等夸浅。

再總結(jié)一下：ppk把移動(dòng)設(shè)備上的viewport分為layout viewport仑最、visual viewport和ideal viewport三類，其中的ideal viewport是最適合移動(dòng)設(shè)備的viewport帆喇，ideal viewport的寬度等于移動(dòng)設(shè)備的屏幕寬度警医，只要在css中把某一元素的寬度設(shè)為ideal viewport的寬度(單位用px)，那么這個(gè)元素的寬度就是設(shè)備屏幕的寬度了坯钦，也就是寬度為100%的效果预皇。ideal viewport的意義在于，無(wú)論在何種分辨率的屏幕下婉刀，那些針對(duì)ideal viewport而設(shè)計(jì)的網(wǎng)站吟温，不需要用戶手動(dòng)縮放，也不需要出現(xiàn)橫向滾動(dòng)條路星，都可以完美的呈現(xiàn)給用戶溯街。

利用meta標(biāo)簽對(duì)viewport進(jìn)行控制

移動(dòng)設(shè)備默認(rèn)的viewport是layout viewport诱桂，也就是那個(gè)比屏幕要寬的viewport洋丐，但在進(jìn)行移動(dòng)設(shè)備網(wǎng)站的開(kāi)發(fā)時(shí)呈昔，我們需要的是ideal viewport。那么怎么才能得到ideal viewport呢友绝？這就該輪到meta標(biāo)簽出場(chǎng)了堤尾。

我們?cè)陂_(kāi)發(fā)移動(dòng)設(shè)備的網(wǎng)站時(shí)，最常見(jiàn)的的一個(gè)動(dòng)作就是把下面這個(gè)東西復(fù)制到我們的head標(biāo)簽中：

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

該meta標(biāo)簽的作用是讓當(dāng)前viewport的寬度等于設(shè)備的寬度迁客，同時(shí)不允許用戶手動(dòng)縮放郭宝。也許允不允許用戶縮放不同的網(wǎng)站有不同的要求，但讓viewport的寬度等于設(shè)備的寬度掷漱，這個(gè)應(yīng)該是大家都想要的效果粘室，如果你不這樣的設(shè)定的話，那就會(huì)使用那個(gè)比屏幕寬的默認(rèn)viewport卜范，也就是說(shuō)會(huì)出現(xiàn)橫向滾動(dòng)條衔统。

這個(gè)name為viewport的meta標(biāo)簽到底有哪些東西呢，又都有什么作用呢海雪？

meta viewport 標(biāo)簽首先是由蘋果公司在其safari瀏覽器中引入的锦爵，目的就是解決移動(dòng)設(shè)備的viewport問(wèn)題。后來(lái)安卓以及各大瀏覽器廠商也都紛紛效仿奥裸，引入對(duì)meta viewport的支持险掀，事實(shí)也證明這個(gè)東西還是非常有用的。

在蘋果的規(guī)范中湾宙，meta viewport有6個(gè)屬性(暫且把content中的那些東西稱為一個(gè)個(gè)屬性和值)樟氢，如下：

這些屬性可以同時(shí)使用罢绽，也可以單獨(dú)使用或混合使用，多個(gè)屬性同時(shí)使用時(shí)用逗號(hào)隔開(kāi)就行了静盅。

把當(dāng)前的viewport寬度設(shè)置為ideal viewport的寬度

要得到ideal viewport就必須把默認(rèn)的layout viewport的寬度設(shè)為移動(dòng)設(shè)備的屏幕寬度良价。因?yàn)?code>meta viewport中的width能控制layout viewport的寬度寝殴，所以我們只需要把width設(shè)為device-width這個(gè)特殊的值就行了。

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

通過(guò)width=device-width明垢，所有瀏覽器都能把當(dāng)前的viewport寬度變成ideal viewport的寬度蚣常，但要注意的是，在iphone和ipad上痊银，無(wú)論是豎屏還是橫屏抵蚊，寬度都是豎屏?xí)rideal viewport的寬度。
可是你肯定不知道

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

這句代碼也能達(dá)到和前一句代碼一樣的效果溯革，也可以把當(dāng)前的的viewport變?yōu)?code>ideal viewport贞绳。

因?yàn)閺睦碚撋蟻?lái)講，這句代碼的作用只是不對(duì)當(dāng)前的頁(yè)面進(jìn)行縮放致稀，也就是頁(yè)面本該是多大就是多大冈闭。那為什么會(huì)有width=device-width的效果呢？

要想清楚這件事情抖单，首先你得弄明白這個(gè)縮放是相對(duì)于什么來(lái)縮放的萎攒，因?yàn)檫@里的縮放值是1，也就是沒(méi)縮放臭猜，但卻達(dá)到了ideal viewport的效果躺酒，所以，那答案就只有一個(gè)了蔑歌，縮放是相對(duì)于ideal viewport來(lái)進(jìn)行縮放的羹应，當(dāng)對(duì)ideal viewport進(jìn)行100%的縮放，也就是縮放值為1的時(shí)候次屠，不就得到了ideal viewport嗎园匹？事實(shí)證明，的確是這樣的劫灶。
windows phone上的IE無(wú)論是豎屏還是橫屏都把寬度設(shè)為豎屏?xí)rideal viewport的寬度裸违。但這點(diǎn)小瑕疵已經(jīng)無(wú)關(guān)緊要了。

但如果width和initial-scale=1同時(shí)出現(xiàn)本昏，并且還出現(xiàn)了沖突呢供汛？比如：

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

width=400表示把當(dāng)前viewport的寬度設(shè)為400px，initial-scale=1則表示把當(dāng)前viewport的寬度設(shè)為ideal viewport的寬度涌穆，那么瀏覽器到底該服從哪個(gè)命令呢怔昨？是書寫順序在后面的那個(gè)嗎？不是宿稀。當(dāng)遇到這種情況時(shí)趁舀，瀏覽器會(huì)取它們兩個(gè)中較大的那個(gè)值。例如祝沸，當(dāng)width=400矮烹，ideal viewport的寬度為320時(shí)越庇，取的是400；當(dāng)width=400奉狈，ideal viewport的寬度為480時(shí)卤唉，取的是ideal viewport的寬度。

最后嘹吨，總結(jié)一下搬味，要把當(dāng)前的viewport寬度設(shè)為ideal viewport的寬度境氢，既可以設(shè)置width=device-width蟀拷，也可以設(shè)置initial-scale=1，但這兩者各有一個(gè)小缺陷萍聊，就是iphone问芬、ipad以及IE會(huì)橫豎屏不分，通通以豎屏的ideal viewport寬度為準(zhǔn)寿桨。所以此衅，最完美的寫法應(yīng)該是，兩者都寫上去亭螟，這樣就initial-scale=1解決了iphone挡鞍、ipad的毛病，width=device-width則解決了IE的毛苍だ印：

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