摘要：通過上述的例子我們知道基本上的默認寬度是，且瀏覽器會將者大小的文檔塞進有限的設備寬度內瀏覽器會動態計算文檔的布局及內容，所以我們看到的東西都很小。故縮小引發的原理一樣。以上只為個人多日查閱實踐及總結，僅作參考多謝

相信所有的 web 開發者都見過亦或用過這個神奇的 meta 標簽頭，亦或在不明白或者半明半蒙的情況下就用上了。

先來解個疑惑 ，上圖

chrome 的手持設備模擬器相信大家再熟悉不過了，那么左上角的320*480是神馬 ？應該很多人已經在心里有了個答案。
在解開這個疑惑之前 需要引入一個概念：

A pixel is not a pixel is not a pixel

引用 W3cplus 此像素非彼像素中的一句話

是的，想說明的就是這里的320*480指的是你的設備的 dpx 而非 CSS 中的 px

至于有什么區別呢？
當然有區別！：

設備的 px 是指度量設備大小尺寸的一種單位，而我們常在web 應用中使用的 px 是針對Web 應用開發用來度量應用程序中元素的相對尺寸，是一種抽象的概念和前面的設備像素是不搭噶的兩種存在。

那么為什么當我們使用的 css 中的 px 來設計頁面的時候 使用與設備上的的寬度一致時能夠得到良好的視覺效應呢，且聽我慢慢道來。

我們先看下

首先引用下 ppk 文章中的英文解釋(網絡上大部分的出處出自此)：

Directives
Every name/value pair is a directive. (The word is my own invention.) 
There are six of them in total:

width     
    Sets the width of the layout viewport.
initial-scale       
    Sets the initial zoom of the page AND the width of the layout viewport.
minimum-scale
    Sets the minimum zoom level (i.e. how much the user can zoom out).
maximum-scale
    Sets the maximum zoom level (i.e. how much the user can zoom in).
height
    Is supposed to set the height of the layout viewport. It is not supported anywhere.
user-scalable
    When set to no prevents the user from zooming. This is an abomination that MUST NOT be used.

看不明白？好吧我找來翻譯一把（翻譯的有點強硬別見怪）：

指令
每對鍵值對都是一個指令，（ppk 大神的叫法）以下總計共有6對：
width
    設置layout viewport的寬度（css px）
initial-scale 
    設置頁面的初始縮放比例同時可以設置layout viewport的寬度
minimum-scale
    設置最小縮放比例（指用戶能夠縮小到多小）
maximum-scale
    設置最大縮放比例（指用戶能夠放大到多大）
height
    設置layout viewport的高度，但暫時不怎么被支持
user-scalable
    設置是否允許用戶放大縮小。ppk 指出這個屬性很邪惡，最好別用（偷笑）
    

看到這里或許又蒙了一半 layout viewport是什么鬼？

ppk 大神的意思是想象下在我們設置 viewport 后，瀏覽器能夠生成3種 viewport 分別對應 visual viewport 、 layout viewport 和 ideal viewport。

這里我不打算摻雜過多的這些理論，只想要簡單明了的方式解釋（忽悠）出 使用viewport 會發生什么事，如果對 ppk 大神的這些理論感興趣可以 go here

1.A tale of two viewports — part one
2.A tale of two viewports — part two
3.Meta viewport

大概的了解到 viewport 的語法后接下來就是案例講解

這里拿百度的 pc 版做例子（因為 pc 版沒有 viewport）首先在非模擬器狀態下打開百度然后切換到模擬器狀態下

我們可以看到的是整個 pc 版的頁面被壓縮到寬度僅有320px（非 css 單位）的設備中 ，正常人都沒辦法使用吧？
那么，這個時候這個頁面的寬度是多少呢（css px）？

我們選中 html 元素，查看右下角的盒子樣式 可以明確的看到當前的頁面寬度是980px（css px）

也就是說瀏覽器在只有320dpx 的情況下展示了980px 的頁面（明顯可以看出這里的 dpx 與 px 并不是1：1的關系）

但是我們從左下角的樣式表內并沒有看到 html 的 width，那么這個 html 的980 px寬是哪來的呢

答案是來自 viewport的！ 別忘記了上面的 viewport 語法，也就是說 viewport設置了寬度為980px，但是前面不是說了這個例子使用的是百度的 pc 端的頁面沒有 viewport 嗎？

那由哪來的 viewport 設置寬度呢 ，看到這里相信已經有人有答案了，沒錯當你沒有設置 viewport 的時候瀏覽器會自動為你采用默認值 那么默認值是多少？

這里找來 ppk 的測試

什么意思呢 其實意思就是在默認的情況下（針對手持端）如果你沒有設置過 viewport 那么我瀏覽器就會根據我自個設備決定采用viewport寬度是多少。

知道了這些還不夠 ，那么為什么我有了 viewport 設置寬度之后 html 就會采用其寬度呢 ：

可以這么理解，viewport是一種超越 html 元素的存在，當沒有為 html 設置寬度的時候，html 的寬度繼承于 viewport設置的寬度

就拿w3cplus舉個例子：

和上面的一樣拿 pc 版測試，默認沒有 viewport 查看 html 寬度果然為980px

接下來為 html 元素設置寬度為50% 可以看到效果 其寬度值為490px

到這里我們可以得出一個總結：

viewport 其實就是設置在當前設備的寬度下展示多少CSS px的網頁內容

上一個例子我們已經看到當 html 文檔的寬度小于 viewport 的寬度是會有什么樣的效果，那么反過來如果設置 html 的寬度大于 viewport 又會是什么效果呢

這里設置 html的寬度為2000px 可以看出頁面出現了滾動效果。

這里又得出一個總結：

當 html 文檔的寬度小于 viewport 的寬度時以文檔的實際寬度為準，文檔少于 viewport 寬度的部分不顯示內容，當 html文檔的寬度大于 viewport 的時候，你能看到的區域依然是 viewport 的大小區域，不過你可以通過滑動或滾動頁面來查看大于viewport 區域的內容

至此我們已經知道了設備寬度與 viewport 的寬度以及實際文檔的寬度之間的關系。

通過上述的例子我們知道基本上 viewport 的默認寬度是980px，且瀏覽器會將者 viewport 大小的 html 文檔塞進有限的設備寬度內（瀏覽器會動態計算文檔的布局及內容），所以我們看到的東西都很小。
那么我們想要清除的看清文檔內的內容怎么辦 ，沒錯，縮小 viewport 的大小，什么原理？
當我們縮小 viewport 的寬度的時候文檔的寬度也對應的被縮小，即一樣的設備寬度，我顯示的東西少了（這時候瀏覽器重新計算文檔布局及內容）可以看到的結果是字體被放大了，內容都被放大了！

這里還是拿W3CPlus的網站做例子：一樣的拿 pc 版的無 viewport 的文檔放入手持設備內，沒辦法看清內容

這時候我在控制臺輸入這么一段代碼：

document.head.insertAdjacentHTML("afterbegin","");

這時候是不是清晰很多呢~。

知道了這個原理，那我們要把 viewport 的大小縮小到多小比較合適呢 ？答案是和你的設備寬度一樣寬。但是并不是每個手持設備都是320dpx寬啊，這時候我們可以這樣寫 viewport 頭：

這樣就會自動計算你的設備寬度了，此處應該有掌聲~

但是這個時候并未結束，是的 ，當你把你原先的980寬的頁面重置成了320寬 那頁面布局當然就發生變化了，慘的，無法入目，這時候就得考驗大家的 css 功底了，如何避免不在此文章討論范圍內。

1.當我們在手持設備上放大縮小頁面的時候，發生了什么？
2.設備的寬度與分辨率的關系？為什么我們在做 iphone 圖的時候640但到了頁面只能為320？

解釋：
1.
當我們在手持設備上放大的時候，設備的大小不變（廢話），viewport 的大小不變， html 的大小不變，那變的是什么？
我們知道當我們設置了 頁面的寬度是與設備的寬度一致的達到1：1的關系
其實變得是你的可視區域 也就是 ppk 大神說的visual viewport，拋開他的理論，簡單的理解就是你當你觸發放大的是個動作時，頁面的每一 css px寬度對應了多個設備的像素寬度（這里暫時不談分辨率），所以你能看到元素被放大了，但是由于設備的寬度有限，所以你看到的內容也就少了，而viewport在我們一旦設置好后沒有手動修改的話是不會發生變化的包括這里。
故 縮小引發的原理一樣。

2.
設備的寬度的 px 和分辨率的關系？
在沒有視網膜屏幕出現前 除了些高清屏幕外，大部分的手持設備的寬度與分辨率像素是一對一的關系，直到視網膜屏幕的出現打破了這個格局 出現一個設備寬度對應2個或很多的分辨率像素，引發什么結果？當然是更清晰了，因為用了更多的像素去表達相同的一個設備寬度像素的內容。更多細節探討可以自行 度娘 更多。

了解了設備寬度與分辨率的關系之后 解釋下圖片與分辨率的關系，通常圖片的像素是與分辨率對應的，故設計師在 ps 上用640分辨率設計圖片的時候起始也是對應我們的設備寬度320（前面解釋到視網膜屏幕一個設備像素會對應2個到多個分辨率像素），設計出來的圖片同理。當然你把設計出來的640分辨率像素的圖片放在一樣是320寬度像素下的視網膜設備和非視網膜設備下的效果看起來差不多其實仔細看還是有差別的即是否更高清的差別（可以拿安卓和 ios對比）。

弄清楚了viewport 這個小巨人后我們還得知道如何通過 js 代碼來獲取設備的寬度、viewport 的寬度以及 html 文檔的寬度

總結如下（不包括 IE 及其他特殊情況）：

/*
*1.獲取包含滾動條尺寸的瀏覽器完整內部尺寸
*2.獲取用戶實際的看到的視口大小（即發送縮放后的可視區域大小|visual viewport 大小）默認等于viewport大小
*/
window.innerHeight
window.innerWidth 

/*
*1.設置的viewport大小
*/
document.documentElement.clientHeight
document.documentElement.clientWidth

/*
*1.HTML 文檔大小
*/
document.documentElement.offsetHeight
document.documentElement.offsetWidth

/*
*1.設備大小
*/
screen.Height
screen.width

網上有大量的關于 viewport 的討論，不乏各種大神的講解，各有千秋。
以上只為個人多日查閱實踐及總結，僅作參考！
多謝！