<meta name="viewport" content="width=device-width;initial-scale=1">
移動(dòng)頁面開發(fā)時(shí)候頭部常常用到這句meta王污；來定義移動(dòng)設(shè)備viewport可視區(qū)域的大小棒妨；
在PC端的網(wǎng)站開發(fā)中，設(shè)計(jì)師按照某個(gè)分辨率設(shè)計(jì)的界面含长，PC端可以做到同尺寸大小的還原券腔，但移動(dòng)設(shè)備的屏幕尺寸較小，區(qū)別于PC端拘泞，可視范圍有限纷纫，傳統(tǒng)的網(wǎng)頁在移動(dòng)端瀏覽器卻不能完全顯示，所以移動(dòng)端瀏覽器視口即viewport大小可以改變田弥，以適應(yīng)頁面顯示涛酗。
viewport俗稱視口，用來描述一塊區(qū)域，瀏覽器可以在這塊區(qū)域上去排版商叹、渲染網(wǎng)頁燕刻。瀏覽器默認(rèn)情況下，viewport可能比手機(jī)屏幕大很多剖笙。apple的viewport大小是980px卵洗。但是這樣的網(wǎng)頁即使能正確的顯示出來也得縮放或者用滾動(dòng)條，所以我們?cè)趯懬岸司W(wǎng)頁的時(shí)候弥咪，會(huì)用一個(gè)width=device-width的viewport过蹂，這樣我們css里看到的屏幕總寬度大概在320px左右，1px代表的物理像素?cái)?shù)會(huì)自動(dòng)根據(jù)屏幕密度進(jìn)行換算聚至。
再來說說物理像素酷勺，設(shè)備像素，css像素扳躬，設(shè)備獨(dú)立像素脆诉，設(shè)備分辨率，設(shè)備像素比贷币，像素密度這幾個(gè)概念击胜。
這幾個(gè)名詞特別容易混淆。
物理像素其實(shí)就是設(shè)備像素役纹，是設(shè)備上能控制顯示的最小單位偶摔，這些像素可以看成是設(shè)備屏幕上的一個(gè)個(gè)點(diǎn)。
css像素就是我們?cè)陧撁骈_發(fā)中定義元素寬高位置的單位促脉，是web編程的一個(gè)概念辰斋，是抽象的，用于邏輯上衡量物理像素的單位瘸味。與物理像素之間存在對(duì)應(yīng)關(guān)系亡呵，可以轉(zhuǎn)換。
設(shè)備獨(dú)立像素的概念包含了css像素硫戈，是虛擬像素。與屏幕密度有關(guān)下硕。android機(jī)中CSS 像素就不叫”CSS像素”了而是叫”設(shè)備獨(dú)立像素”丁逝。PC端和部分移動(dòng)端通過screen.width/height 獲取的這個(gè)值就是設(shè)備獨(dú)立像素（CSS 像素），而不是設(shè)備的屏幕分辨率梭姓，因?yàn)樵O(shè)備的屏幕分辨率對(duì)于WEB開發(fā)者來說是無法通過代碼來獲得的霜幼。
設(shè)備分辨率即時(shí)指屏幕顯示器的分辨率，通常設(shè)計(jì)師在涉及界面的時(shí)候會(huì)選取某個(gè)設(shè)備的分辨率作為界面分辨率誉尖。比如根據(jù)iphone6設(shè)備分辨率的大小設(shè)計(jì)的界面大小750px*1334px罪既。
這樣看來對(duì)這幾個(gè)名詞就有了一個(gè)具體的理解了。上面我們也說到物理像素和設(shè)備獨(dú)立像素之間存在對(duì)應(yīng)關(guān)系。那么就有了設(shè)備像素比這個(gè)東西琢感。
window.devicePixelRatio是設(shè)備上物理像素和設(shè)備獨(dú)立像素(device-independent pixels (dips))的比例丢间。公式表示就是：window.devicePixelRatio = 物理像素 / dips
當(dāng)頁面設(shè)置了<meta name="viewport" content="width=device-width">
時(shí)候，document.documentElement.clientWidth
在大部分瀏覽器下驹针，得到的是布局視區(qū)的寬度烘挫，等同于dips的寬度。對(duì)于screen.width的值：
在iOS視網(wǎng)膜設(shè)備上柬甥，screen.width返回dips寬饮六。因此，在豎著顯示的時(shí)候苛蒲，視網(wǎng)膜顯示屏的ipad和非視網(wǎng)膜顯示屏的ipad返回的都是768卤橄。
而Android設(shè)備上，screen.width返回的是物理像素寬度臂外。
PC端的時(shí)候設(shè)備像素比的值默認(rèn)為1窟扑，即頁面沒有縮放的情況下一個(gè)物理像素 = 一個(gè)設(shè)備獨(dú)立像素。JavaScript 中的window.devicePixelRatio
可以獲取設(shè)備中的像素比值寄月。例如iphone6的設(shè)備像素比為2辜膝；iphone 6plus的設(shè)備像素比為3。
PPI就是屏幕像素密度（pixel density）漾肮。PPI的值越高厂抖，畫質(zhì)越好，也就是越細(xì)膩克懊，看起來更有逼格忱辅。PPI 值超過300的叫做超高密度屏幕，Apple 設(shè)備中叫超高密度屏幕為Retina視網(wǎng)膜屏幕谭溉。
另附：
var w1 = document.body.clientWidth,h1 = document.body.clientHeight; //body可視區(qū)域?qū)捀?var w2 = window.innerWidth,h2 = window.innerHeight; //窗口寬高
var w3 = screen.width,h3 = screen.height; //設(shè)備屏幕寬高
var w = document.documentElement.clientWidth,h = document.documentElement.clientHeight; //瀏覽器視口的寬高
