摘要：通過(guò)上述的例子我們知道基本上的默認(rèn)寬度是，且瀏覽器會(huì)將者大小的文檔塞進(jìn)有限的設(shè)備寬度內(nèi)瀏覽器會(huì)動(dòng)態(tài)計(jì)算文檔的布局及內(nèi)容，所以我們看到的東西都很小。故縮小引發(fā)的原理一樣。以上只為個(gè)人多日查閱實(shí)踐及總結(jié)，僅作參考多謝

相信所有的 web 開(kāi)發(fā)者都見(jiàn)過(guò)亦或用過(guò)這個(gè)神奇的 meta 標(biāo)簽頭，亦或在不明白或者半明半蒙的情況下就用上了。

先來(lái)解個(gè)疑惑 ，上圖

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

A pixel is not a pixel is not a pixel

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

是的，想說(shuō)明的就是這里的320*480指的是你的設(shè)備的 dpx 而非 CSS 中的 px

至于有什么區(qū)別呢？
當(dāng)然有區(qū)別?。?/p>

設(shè)備的 px 是指度量設(shè)備大小尺寸的一種單位，而我們常在web 應(yīng)用中使用的 px 是針對(duì)Web 應(yīng)用開(kāi)發(fā)用來(lái)度量應(yīng)用程序中元素的相對(duì)尺寸，是一種抽象的概念和前面的設(shè)備像素是不搭噶的兩種存在。

那么為什么當(dāng)我們使用的 css 中的 px 來(lái)設(shè)計(jì)頁(yè)面的時(shí)候 使用與設(shè)備上的的寬度一致時(shí)能夠得到良好的視覺(jué)效應(yīng)呢，且聽(tīng)我慢慢道來(lái)。

我們先看下

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

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.

看不明白？好吧我找來(lái)翻譯一把（翻譯的有點(diǎn)強(qiáng)硬別見(jiàn)怪）：

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

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

ppk 大神的意思是想象下在我們?cè)O(shè)置 viewport 后，瀏覽器能夠生成3種 viewport 分別對(duì)應(yīng) visual viewport 、 layout viewport 和 ideal viewport。

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

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

大概的了解到 viewport 的語(yǔ)法后接下來(lái)就是案例講解

這里拿百度的 pc 版做例子（因?yàn)?pc 版沒(méi)有 viewport）首先在非模擬器狀態(tài)下打開(kāi)百度然后切換到模擬器狀態(tài)下

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

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

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

但是我們從左下角的樣式表內(nèi)并沒(méi)有看到 html 的 width，那么這個(gè) html 的980 px寬是哪來(lái)的呢

答案是來(lái)自 viewport的！ 別忘記了上面的 viewport 語(yǔ)法，也就是說(shuō) viewport設(shè)置了寬度為980px，但是前面不是說(shuō)了這個(gè)例子使用的是百度的 pc 端的頁(yè)面沒(méi)有 viewport 嗎？

那由哪來(lái)的 viewport 設(shè)置寬度呢 ，看到這里相信已經(jīng)有人有答案了，沒(méi)錯(cuò)當(dāng)你沒(méi)有設(shè)置 viewport 的時(shí)候?yàn)g覽器會(huì)自動(dòng)為你采用默認(rèn)值 那么默認(rèn)值是多少？

這里找來(lái) ppk 的測(cè)試

什么意思呢 其實(shí)意思就是在默認(rèn)的情況下（針對(duì)手持端）如果你沒(méi)有設(shè)置過(guò) viewport 那么我瀏覽器就會(huì)根據(jù)我自個(gè)設(shè)備決定采用viewport寬度是多少。

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

可以這么理解，viewport是一種超越 html 元素的存在，當(dāng)沒(méi)有為 html 設(shè)置寬度的時(shí)候，html 的寬度繼承于 viewport設(shè)置的寬度

就拿w3cplus舉個(gè)例子：

和上面的一樣拿 pc 版測(cè)試，默認(rèn)沒(méi)有 viewport 查看 html 寬度果然為980px

接下來(lái)為 html 元素設(shè)置寬度為50% 可以看到效果 其寬度值為490px

到這里我們可以得出一個(gè)總結(jié)：

viewport 其實(shí)就是設(shè)置在當(dāng)前設(shè)備的寬度下展示多少CSS px的網(wǎng)頁(yè)內(nèi)容

上一個(gè)例子我們已經(jīng)看到當(dāng) html 文檔的寬度小于 viewport 的寬度是會(huì)有什么樣的效果，那么反過(guò)來(lái)如果設(shè)置 html 的寬度大于 viewport 又會(huì)是什么效果呢

這里設(shè)置 html的寬度為2000px 可以看出頁(yè)面出現(xiàn)了滾動(dòng)效果。

這里又得出一個(gè)總結(jié)：

當(dāng) html 文檔的寬度小于 viewport 的寬度時(shí)以文檔的實(shí)際寬度為準(zhǔn)，文檔少于 viewport 寬度的部分不顯示內(nèi)容，當(dāng) html文檔的寬度大于 viewport 的時(shí)候，你能看到的區(qū)域依然是 viewport 的大小區(qū)域，不過(guò)你可以通過(guò)滑動(dòng)或滾動(dòng)頁(yè)面來(lái)查看大于viewport 區(qū)域的內(nèi)容

至此我們已經(jīng)知道了設(shè)備寬度與 viewport 的寬度以及實(shí)際文檔的寬度之間的關(guān)系。

通過(guò)上述的例子我們知道基本上 viewport 的默認(rèn)寬度是980px，且瀏覽器會(huì)將者 viewport 大小的 html 文檔塞進(jìn)有限的設(shè)備寬度內(nèi)（瀏覽器會(huì)動(dòng)態(tài)計(jì)算文檔的布局及內(nèi)容），所以我們看到的東西都很小。
那么我們想要清除的看清文檔內(nèi)的內(nèi)容怎么辦 ，沒(méi)錯(cuò)，縮小 viewport 的大小，什么原理？
當(dāng)我們縮小 viewport 的寬度的時(shí)候文檔的寬度也對(duì)應(yīng)的被縮小，即一樣的設(shè)備寬度，我顯示的東西少了（這時(shí)候?yàn)g覽器重新計(jì)算文檔布局及內(nèi)容）可以看到的結(jié)果是字體被放大了，內(nèi)容都被放大了！

這里還是拿W3CPlus的網(wǎng)站做例子：一樣的拿 pc 版的無(wú) viewport 的文檔放入手持設(shè)備內(nèi)，沒(méi)辦法看清內(nèi)容

這時(shí)候我在控制臺(tái)輸入這么一段代碼：

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

這時(shí)候是不是清晰很多呢~。

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

這樣就會(huì)自動(dòng)計(jì)算你的設(shè)備寬度了，此處應(yīng)該有掌聲~

但是這個(gè)時(shí)候并未結(jié)束，是的 ，當(dāng)你把你原先的980寬的頁(yè)面重置成了320寬 那頁(yè)面布局當(dāng)然就發(fā)生變化了，慘的，無(wú)法入目，這時(shí)候就得考驗(yàn)大家的 css 功底了，如何避免不在此文章討論范圍內(nèi)。

1.當(dāng)我們?cè)谑殖衷O(shè)備上放大縮小頁(yè)面的時(shí)候，發(fā)生了什么？
2.設(shè)備的寬度與分辨率的關(guān)系？為什么我們?cè)谧?iphone 圖的時(shí)候640但到了頁(yè)面只能為320？

解釋：
1.
當(dāng)我們?cè)谑殖衷O(shè)備上放大的時(shí)候，設(shè)備的大小不變（廢話），viewport 的大小不變， html 的大小不變，那變的是什么？
我們知道當(dāng)我們?cè)O(shè)置了 頁(yè)面的寬度是與設(shè)備的寬度一致的達(dá)到1：1的關(guān)系
其實(shí)變得是你的可視區(qū)域 也就是 ppk 大神說(shuō)的visual viewport，拋開(kāi)他的理論，簡(jiǎn)單的理解就是你當(dāng)你觸發(fā)放大的是個(gè)動(dòng)作時(shí)，頁(yè)面的每一 css px寬度對(duì)應(yīng)了多個(gè)設(shè)備的像素寬度（這里暫時(shí)不談分辨率），所以你能看到元素被放大了，但是由于設(shè)備的寬度有限，所以你看到的內(nèi)容也就少了，而viewport在我們一旦設(shè)置好后沒(méi)有手動(dòng)修改的話是不會(huì)發(fā)生變化的包括這里。
故 縮小引發(fā)的原理一樣。

2.
設(shè)備的寬度的 px 和分辨率的關(guān)系？
在沒(méi)有視網(wǎng)膜屏幕出現(xiàn)前 除了些高清屏幕外，大部分的手持設(shè)備的寬度與分辨率像素是一對(duì)一的關(guān)系，直到視網(wǎng)膜屏幕的出現(xiàn)打破了這個(gè)格局 出現(xiàn)一個(gè)設(shè)備寬度對(duì)應(yīng)2個(gè)或很多的分辨率像素，引發(fā)什么結(jié)果？當(dāng)然是更清晰了，因?yàn)橛昧烁嗟南袼厝ケ磉_(dá)相同的一個(gè)設(shè)備寬度像素的內(nèi)容。更多細(xì)節(jié)探討可以自行 度娘 更多。

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

弄清楚了viewport 這個(gè)小巨人后我們還得知道如何通過(guò) js 代碼來(lái)獲取設(shè)備的寬度、viewport 的寬度以及 html 文檔的寬度

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

/*
*1.獲取包含滾動(dòng)條尺寸的瀏覽器完整內(nèi)部尺寸
*2.獲取用戶實(shí)際的看到的視口大?。窗l(fā)送縮放后的可視區(qū)域大小|visual viewport 大小）默認(rèn)等于viewport大小
*/
window.innerHeight
window.innerWidth 

/*
*1.設(shè)置的viewport大小
*/
document.documentElement.clientHeight
document.documentElement.clientWidth

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

/*
*1.設(shè)備大小
*/
screen.Height
screen.width

網(wǎng)上有大量的關(guān)于 viewport 的討論，不乏各種大神的講解，各有千秋。
以上只為個(gè)人多日查閱實(shí)踐及總結(jié)，僅作參考！
多謝！