1、屏幕尺寸
屏幕大小，指屏幕對角線長度，而不是屏幕的高度或?qū)挾龋瑔挝粸橛⒋纭?/p>
2、顯示/物理分辨率
屏幕擁有像素的總數(shù)以及屏幕寬和高方向的像素數(shù)量，單位為像素。像素/px是組成屏幕圖像的最小點。同樣大小的屏幕，像素越高越清晰。
3、屏幕像素密度PPI
ppi是指每英寸所擁有的像素數(shù)/每英寸像素。像素密越高，代表屏幕圖像顯示越清晰。
4、視網(wǎng)膜屏幕
*ppi與dpi
5、設(shè)備像素(device pixel)與邏輯像素(css像素)
設(shè)備像素
是物理概念，指的是設(shè)備中使用的物理像素,也就是屏幕中的發(fā)光的點數(shù)(屏幕由很多個發(fā)光點組成，每個發(fā)光點可以顯示不同的顏色，這些發(fā)光的點組成了屏幕)。
比如iPhone 5的分辨率640 x 1136px。橫向有640個發(fā)光的點，縱向有1136個發(fā)光的點。所以我們說iPhone5 的設(shè)備水平像素是640像素，指的是640個發(fā)光點。
CSS像素
是Web編程的概念，CSS樣式代碼中使用的邏輯像素。1個邏輯像素可能對應(yīng)多個物理像素（發(fā)光點）。
在CSS規(guī)范中，長度單位可以分為兩類，絕對(absolute)單位以及相對(relative)單位。px是一個相對單位，相對的是設(shè)備像素(device pixel)。
假設(shè)電腦的物理分辨率是1024* 768。 如果我故意設(shè)置操作系統(tǒng)分辨率為512*384（水平和垂直各縮小1倍），那么此時css定義的1px像素的盒子在屏幕中的顯示的寬度比原來高分辨率的寬度增加一倍，所以CSS中的像素只是相對，不是絕對的。當(dāng)對1px像素進(jìn)行縮小時不會有效果，因為CSS像素至少要占有一個設(shè)備像素。
iPhone 5使用的是Retina視網(wǎng)膜屏幕，橫向邏輯css的像素是320px，但是實際物理像素是640的點，所以水平方向就會有2個點對應(yīng)css的1個像素，垂直也是兩倍的關(guān)系，也就是1個css的邏輯像素：由水平2個物理像素點和垂直2個像素點也就是（2乘2=4）4個物理像素點 顯示1px寬1px高的一個邏輯的css像素。
設(shè)備獨立像素（DIP）
設(shè)備獨立像素（DIP，device-independent pixel，density-independent pixel），簡單地來說設(shè)備獨立像素就是：獨立于設(shè)備的用于邏輯上衡量像素的單位。在移動Web開發(fā)中就是指的CSS的邏輯像素。
6、設(shè)備像素比(devicePixelRatio)
設(shè)備像素比(dpr) 與 ppi有一定的相關(guān)性，即ppi越大，dpr也相應(yīng)的較大，1dpr 對應(yīng)160ppi ，其對照表如下：
設(shè)備像素比DPR(devicePixelRatio)是默認(rèn)縮放為100%的情況下，設(shè)備像素（也稱物理像素）和CSS像素的比值(設(shè)備獨立像素)。
DPR = 設(shè)備像素 / CSS像素
僅僅計算橫向或者縱向。比如：iphone5為例：水平物理像素640 頁面縮放100%時，橫向320px，則dpr = 640 / 320 = 2
DPR也有對應(yīng)的javascript屬性window.devicePixelRatio（ie11+,edge,chrome49+, Safari9.1+）
DPR不一定都是整數(shù)，尤其是android設(shè)備十分的碎片化！
7、視口
問題：PC端設(shè)計的網(wǎng)頁一般都是大于960px 尺寸，移動端上的瀏覽器為了能夠?qū)⒛切镻C端設(shè)計的網(wǎng)站正常顯示，一般都給一個默認(rèn)的整屏的寬度為980px（css像素），雖然能這樣讓移動端瀏覽器兼容大部分PC端頁面，但是頁面縮放后文字會變得非常小，用戶需要手動放大縮小才能看清楚，體驗非常差。
蘋果首先在瀏覽器上引入了視口的功能，隨后各大瀏覽器都跟隨實現(xiàn)。
視口（viewport）是用戶網(wǎng)頁的可視區(qū)域，也可稱之為視區(qū)。
PC端視口
PC端視口的大小跟瀏覽器的可視區(qū)的寬高保持1：1固定比例對應(yīng)。也就是說瀏覽器改變寬高，視口跟著改變。
移動端視口
在移動端視口與移動端瀏覽器屏幕寬度不再相關(guān)聯(lián)，可以比瀏覽器的可視區(qū)域更大或者更小，還可以對頁面進(jìn)行縮放（放大、縮?。?br> 由于移動端的視口可以進(jìn)行放大、縮小、改變寬高，所以造成了視口的大小跟屏幕能顯示的內(nèi)容的寬度和布局的寬度不一致，這就出現(xiàn)兩個概念：布局視口和視覺視口。
視圖視口（visual viewport）
視圖視口是手持設(shè)備物理屏幕的可視區(qū)域。
視覺視口是用戶正在看到的網(wǎng)站的區(qū)域，對于的javascript屬性是
window.innerWidth/Height
布局視口（layout viewport）
布局視口：在移動端視口與移動端瀏覽器屏幕寬度不再相關(guān)聯(lián)，可以單獨設(shè)置它的寬高（主要是寬），這個視口就是HTML頁面布局的區(qū)域，并且可以通過viewport meta標(biāo)簽控制。
布局視口不會受到縮放的影響，縮放不會導(dǎo)致頁面重排渲染，對于移動端寶貴的性能來說非常重要。
layout viewport布局視口的寬度可以通過js的document.documentElement.clientWidth獲取。
各個瀏覽器默認(rèn)的布局視口寬度：
meta標(biāo)簽控制布局視口的寬度
meta標(biāo)簽設(shè)置布局視口的語法：
<meta name="viewport" content="name1=value1,name2=value2">
width是設(shè)置布局視口的寬度。如果設(shè)置iphone5s具體的width值為：320。
<meta name="viewport" content="width=320">
如果只是設(shè)置viewport的width屬性時，iphone的瀏覽器自動將頁面進(jìn)行縮放到恰好放下頁面而不出現(xiàn)滾動條，所以此時：visual viewport == layourt viewport。
上例中：就像把屏幕分成320份。如果設(shè)置一個元素為100px*100px，看起來就是屏幕的100/320
如果布局視口的寬度=device-width(設(shè)備寬度，也就是:物理像素/dpr)時，此時頁面100%的寬度正好能在視覺視口中完全顯示，不需要縮放查看頁面了,而且在不同尺寸下都能基本表現(xiàn)一致，此時的布局視口的狀態(tài)我們就稱為理想視口（ideal viewport）。
測試代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>理想視口</title>
<style>
html, body, div {
padding: 0;
margin: 0;
}
.box {
width: 100%;
height: 100px;
background-color: #ccc;
box-sizing: border-box;
}
</style>
</head>
<body>
<div class="box">
</div>
</body>
</html>
理想視口(ideal viewport)
所謂的理想視口是：
第一，不需要用戶縮放和橫向滾動條就能正常的查看網(wǎng)站的所有內(nèi)容；
第二，顯示的文字的大小是合適，比如一段14px大小的文字，不會因為在一個高密度像素的屏幕里顯示得太小而無法看清，理想的情況是這段14px的文字無論是在何種密度屏幕，何種分辨率下，顯示出來的大小都是差不多的。當(dāng)然，不只是文字，其他元素像圖片什么的也是這個道理。
理想視口的寬度一般可以通過以下公式計算：
理想視口的寬度 = 設(shè)備像素 / dpr
也就是當(dāng)布局視口的寬度 等于 設(shè)備獨立像素的寬度時就是理想視口。
簡單的指定的方法：
<!--這一行代碼告訴瀏覽器，布局視口的寬度應(yīng)該與理想視口的寬度一致-->
<meta name="viewport" content="width=device-width">
或者
<meta name="viewport" content="initial-scale=1">
meta標(biāo)簽控制布局視口的縮放
<meta name="viewport" content="initial-scale=1">
為什么我們指定了meta標(biāo)簽的viewport縮放比例1也可以實現(xiàn)理想視口呢？
這個比值到底是誰呢？這個值是確定整體網(wǎng)頁縮放的比例。
縮放比 = 理想視口的寬度 / 視覺視口的寬度
也就是說當(dāng)視覺視口的寬度 和 理想視口的寬度相等時，則就是1。因為手機(jī)端的瀏覽器會自動設(shè)置布局視口的寬度為視覺視口的寬度，所以此時：設(shè)備的布局視口==視覺視口==理想視口。
看一圖就明了：
視覺視口：當(dāng)頁面手動放大的時候，用戶可以看到的網(wǎng)頁內(nèi)容減少，視覺視口的尺寸變小。反之，同理不贅述。
默認(rèn)的縮放（initial-scale）值設(shè)置后，瀏覽器會根據(jù)理想視口計算出視覺視口，并設(shè)置布局視口==視覺視口。
但是如果width和initial-scale都設(shè)置的時候，瀏覽器會取兩個值較大的，所以可以通過width設(shè)置一個最小的布局視口寬度
viewport的其他設(shè)置
maximum-scale
在移動端，你可能會考慮用戶瀏覽不便，然后給予用戶放大頁面的權(quán)利，但同時又希望是在一定范圍內(nèi)的放大，這時就可以使用maximum-scale來進(jìn)行約束。
maximum-scale用于指定用戶能夠放大的比例。
舉個例子來講：
<meta name="viewport" content="initial-scale=1,maximum-scale=5" />
假設(shè)頁面的默認(rèn)縮放值initial-scale是1，那么用戶最終能夠?qū)㈨撁娣糯蟮竭@個初始頁面大小的5倍。
minimum-scale
類似maximum-scale的描述，不過minimum-scale是用來指定頁面縮小比例的。
通常情況下，為了有更好地體驗，不會定義該屬性的值比1更小，因為那樣頁面將變得難以閱讀。
user-scalable
如果你不想頁面被放大或者縮小，通過定義user-scalable來約束用戶是否可以通過手勢對頁面進(jìn)行縮放即可。
該屬性的默認(rèn)值為yes，即可被縮放（如果使用默認(rèn)值，該屬性可以不定義）；當(dāng)然，如果你的應(yīng)用不打算讓用戶擁有縮放權(quán)限，可以將該值設(shè)置為no。
使用方法如下：
<meta name="viewport" content="user-scalable=no" />
