在移動開發初期，我們可能會有以下的困惑
在開發過程中，爲何Iphone5的分辨率是 320px * 568px? 但對外宣稱的分辨率卻是 640 * 1136? 兩者之間的關係是什麼？它們之間是如何進行轉化的？ viewport是啥？有什麼作用？
接下來就來圍繞着這個幾個問題進行解釋
一、首先是一些基本概念的解釋
1. px:
css pixels 邏輯像素，瀏覽器使用的抽象單位。
即是不同的設備 1px所代表的大小不一樣。即是相當於 iphone5中
320px * 568px 所表示的。
2. dp, pt
device independent pixels 設備無關像素。
這裏 iphone5對外宣稱的分辨率爲 640 * 1136即是設備無關像素。這裏可以理解成屏幕寬度被分成了640等分，高度被分成1136等分。
3. dpr
devicePixelRatio, 設備像素縮放比。
即是設備無關像素與邏輯像素(css像素)的比例，通俗的講就是在css中 1px 代表了多少設備像素的問題。
4.其運算關係爲：
1 px = (dpr)2 * 1 dp(平面上)，即是維度上(寬或高) 1 px = dpr * dp ;
表示
1 px 代表的寬度(高度)，爲 dpr個設備無關像素。
因爲 iphone5的dpr爲2， 所以其一個邏輯像素(1px)等於兩個物理像素的長度。
二、那麼爲何iphone5的dpr爲2呢？
下面先看兩個概念。注意下面說的像素是設備無關像素,就是 1136 * 640。
1. DPI
打印紙每英寸可以噴的墨汁點(印刷行業)。
2. PPI
屏幕每英寸的像素數量，即單位英寸的像素密度。
DPI 和 PPI 表示的是同一個意思，即是單位英寸的像素數量。
3. 其計算公式爲(以iphone5爲例)
ppi = √(1136 2 + 640 2 ) / 4 = 326ppi;
因爲ppi 代表每英寸的像素數，所以ppi越大，代表屏幕每英寸的像素數越多，也就是顯示的更加清晰。
而ppi與dpr有一定的相關性，即ppi越大，dpr也相應的較大，其對照表如下。
| ldpi | mdpi | xdpi | hdpi |
|---|---|---|---|
| ppi | 120 | 160 | 240 |
| 默認縮放比(dpr) | 0.75 | 1.0 | 1.5 |
所以我們可以根據算出的ppi對照表格得到 dpr從而，得到 1px代表的設備像素。
綜上，我們可以按一下方式算出iphone5的邏輯分辨率
- (1)、iphone5設備分辨率 1136dp * 640dp
- (2)、ppi = √(1136 2 + 640 2 ) / 4 = 326ppi;
- (3)、 對照表格 dpr = 2
- (4)、得到邏輯像素 (1136 / 2)px * (640 / 2) = 568px * 320px
由上，我們可以知道，320px * 568px 代表的iphone5的邏輯像素，就是書寫css是的像素，而對外宣稱的640 * 1136指的是設備像素，是具體的物理像素，他們之間的轉化關係是通過dpr。下面我通過一個例子來說明。
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.page{
width: 320px;
background: #228822;
height: 568px;
color:#fff;
line-height: 568px;
text-align: center;
font-size: 20px;
}
</style>
</head>
<body>
<div class="page">
320px * 568px
</div>
</body>
</html> 上面寫了個div使其寬度爲 360px,理論上剛好應該可以充滿 iphone5模擬器的寬度，但是實際上呢？ 下面看看其運行結果圖
咦 ！結果怎麼和我們想的不一樣，不但沒充滿寬度，還多了一大半的空白區域，這是爲何呢？
帶着疑問，我們先來看看下圖
what! 文檔的可現實區域爲 980px??????? 說好的 320px呢？我們把寬度改成980px看看
.page{
width: 980px;
background: #228822;
height: 568px;
color:#fff;
line-height: 568px;
text-align: center;
font-size: 20px;
} 結果如下
wk竟然滿屏了。
原來，爲了能在移動端可以正常的訪問pc端的瀏覽器，移動瀏覽器開發商默認了iphone瀏覽器的文檔寬度爲980px, 這樣訪問pc網頁的時候，纔不會使網頁結構崩潰，想一想，假設直接用 320px,那麼當我們訪問pc端網頁，由於pc一般是以1024px作爲總寬度的，如果一行有兩個元素的寬度之和大於 320px,那麼在移動端可能發生一個元素被擠到另外一行的情況。所以在iphone移動端訪問時，瀏覽器會先把文檔渲染到980px寬度裏的文檔裏，然後在縮放到手機視口寬度的大小，所以纔會出現以上左邊有留白的情況。
上面渲染爲980px的窗口，就是所謂的layout viewport(佈局窗口),而手機視口窗口，則稱爲visual viewport(視口窗口)，
要是我們非要用使用 320px呢？ 也是可以的，這裏就要用到viewport了，先看如下代碼
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta name="viewport" content="width=320"/>
<style type="text/css">
.page{
width: 320px;
background: #228822;
height: 568px;
color:#fff;
line-height: 568px;
text-align: center;
font-size: 20px;
}
</style>
</head>
<body>
<div class="page">
320px * 568px
</div>
</body>
</html> 這裏加了一句代碼
<meta name="viewport" content="width=320"/> 其結果爲
這句代碼的作用是使，佈局窗口的寬度等於320px,所以結果纔會佔滿所有的寬度。這裏有一種更加通用的寫法
<meta name="viewport" content="width=device-width"/> 這樣就不用爲每個型號的手機指定佈局寬度了，另外也可以直接設置如下
<meta name="viewport" content="initial-scale = 1"/> 其結果也是一樣的，佈局寬度等於視口寬度。
常見的viewport設置如下
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" /> 