被小看的小巨人 - viewport

viewport淺入

相信全部的 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 來設計頁面的時候 使用與設備上的的寬度一致時可以獲得良好的視覺效應呢，且聽我慢慢道來。

---

咱們先看下

關於 viewport 的 相關聲明語法

<meta name="viewport" content="name=value,name=value">

首先引用下 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 的語法後接下來就是案例講解

當不使用 viewport 時咱們爲 pc 設計的網站在手持設備上是怎麼樣的

這裏拿百度的 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','<meta name="viewport" content="width=320">');

這時候是否是清晰不少呢~。

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

<meta name="viewport" content="width=device-width">

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

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

---

擴展思考

1.當咱們在手持設備上放大縮小頁面的時候，發生了什麼？
2.設備的寬度與分辨率的關係？爲何咱們在作 iphone 圖的時候640但到了頁面只能爲320？

解釋：
1.
當咱們在手持設備上放大的時候，設備的大小不變（廢話），viewport 的大小不變， html 的大小不變，那變的是什麼？
咱們知道當咱們設置了 <meta name="viewport" content="width=device-width">頁面的寬度是與設備的寬度一致的達到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 的討論，不乏各類大神的講解，各有千秋。以上只爲我的多日查閱實踐及總結，僅做參考！多謝！