viewport其實沒那麼難理解

　　在學習移動端佈局的時候，你確定據說過"viewport"這個詞，而後去問度娘或谷歌。你會驚奇的發現，這個viewport不簡單，竟然有那麼多兄弟——layout viewport、visual viewport、ideal viewport。這些都是什麼鬼，而後就硬着頭皮去發現他們的不一樣，找了不少資料，很想搞懂他們，最後多是越看越懵逼，或者就豁然開朗的懂了（我是以爲本身豁然開朗的懂了，因此才寫博客記錄一下感想，不對之處歡迎來噴...）。雖然本身也知道，移動端開發入門沒那麼難，一句代碼搞定—— <meta id="viewport" name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1; user-scalable=no;"> 。但是不理解viewport內心就是不爽，下面我就簡單概括一下本身的總結。

　　

一、各類瀏覽器默認viewport大小

　　爲了能在移動設備上正常顯示那些傳統的爲桌面瀏覽器設計的網站，移動設備上的瀏覽器都會把本身默認的viewport設爲980px或1024px（也多是其它值，這個是由設備本身決定的），但帶來的後果就是瀏覽器會出現橫向滾動條，由於瀏覽器可視區域的寬度是比這個默認的viewport的寬度要小的。下圖列出了一些設備上瀏覽器的默認viewport的寬度。 

 

 二、css的1px不等於設備物理像素的1px

 　　在早先的移動設備中，屏幕像素密度都比較低，如iphone3，它的分辨率爲320x480，在iphone3上，一個css像素確實是等於一個屏幕物理像素的。後來隨着技術的發展，移動設備的屏幕像素密度愈來愈高，從iphone4開始，蘋果公司便推出了所謂的Retina屏，分辨率提升了一倍，變成640x960，但屏幕尺寸卻沒變化，這就意味着一樣大小的屏幕上，像素卻多了一倍，這時，一個css像素是等於兩個物理像素的。其餘品牌的移動設備也是這個道理。例如安卓設備根據屏幕像素密度可分爲ldpi、mdpi、hdpi、xhdpi等不一樣的等級，分辨率也是五花八門，安卓設備上的一個css像素至關於多少個屏幕物理像素，也因設備的不一樣而不一樣，沒有一個定論。例如，在Retina屏的iphone上，devicePixelRatio的值爲2，也就是說1個css像素至關於2個物理像素。

　　還有一個因素也會引發css中px的變化，那就是用戶縮放。例如，當用戶把頁面放大一倍，那麼css中1px所表明的物理像素也會增長一倍；反之把頁面縮小一倍，css中1px所表明的物理像素也會減小一倍。

 

三、viewport三兄弟——layout viewport、visual viewport、ideal viewport

　　layout viewport由來：若是把移動設備上瀏覽器的可視區域設爲viewport的話，某些網站就會由於viewport太窄而顯示錯亂（至關於resize瀏覽器的窗口變小了，以後div這樣的block標籤默認寬度auto變小了，頁面就會亂），因此這些瀏覽器就決定默認狀況下把viewport設爲一個較寬的值，好比980px，這樣的話即便是那些爲桌面設計的網站也能在移動瀏覽器上正常顯示了。瀏覽器默認的viewport叫作 layout viewport。這個layout viewport的寬度能夠經過 document.documentElement.clientWidth 來獲取。

　　visual viewport由來：layout viewport的寬度是大於瀏覽器可視區域的寬度的，因此咱們還須要一個viewport來表明瀏覽器可視區域的大小，這個viewport叫作 visual viewport。visual viewport的寬度能夠經過window.innerWidth 來獲取。

 

　　其實上面倆張圖仍是頗有誤導性的。看下面這張圖，沒設置<meta>的狀況下，同時，div寬度爲auto時：（人家是剛恰好塞滿的，倆種viewport比例1:1）

 

　　ideal viewport由來：如今咱們已經有兩個viewport了：layout viewport 和 visual viewport。但瀏覽器以爲還不夠，由於如今愈來愈多的網站都會爲移動設備進行單獨的設計，因此必須還要有一個能完美適配移動設備的viewport。所謂的完美適配指的是，首先不須要用戶縮放和橫向滾動條就能正常的查看網站的全部內容；第二，顯示的文字的大小是合適，好比一段14px大小的文字，不會由於在一個高密度像素的屏幕裏顯示得過小而沒法看清，理想的狀況是這段14px的文字不管是在何種密度屏幕，何種分辨率下，顯示出來的大小都是差很少的。固然，不僅是文字，其餘元素像圖片什麼的也是這個道理。這個viewport叫作 ideal viewport——移動設備的理想viewport。  ideal viewport並無一個固定的尺寸，不一樣的設備擁有有不一樣的ideal viewport。iphone的ideal viewport寬度有320px、375px..安卓設備就比較複雜了，有320px的，有360px的，有384px的等等。（不可改變的）

 

四、meta標籤的做用

　　移動設備默認的viewport是layout viewport，也就是那個比屏幕要寬的viewport，但在進行移動設備網站的開發時，咱們須要的是ideal viewport。那麼怎麼才能獲得ideal viewport呢？這就該輪到meta標籤出場了。咱們在開發移動設備的網站時，最多見的的一個動做就是把下面這個東西複製到咱們的head標籤中：

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">  /*  device-width就是ideal viewport  */

　　該meta標籤的做用是讓當前viewport的寬度等於設備的寬度，同時不容許用戶手動縮放。也許允不容許用戶縮放不一樣的網站有不一樣的要求，但讓viewport的寬度等於設備的寬度，這個應該是你們都想要的效果，若是你不這樣的設定的話，那就會使用那個比屏幕寬的默認viewport，也就是說會出現橫向滾動條。

　　這個name爲viewport的meta標籤到底有哪些東西呢，又都有什麼做用呢？

width	設置layout viewport  的寬度，爲一個正整數，或字符串"width-device"
initial-scale	設置頁面的初始縮放值，爲一個數字，能夠帶小數
minimum-scale	容許用戶的最小縮放值，爲一個數字，能夠帶小數
maximum-scale	容許用戶的最大縮放值，爲一個數字，能夠帶小數
height	設置layout viewport  的高度，這個屬性對咱們並不重要，不多使用
user-scalable	是否容許用戶進行縮放，值爲"no"或"yes", no 表明不容許，yes表明容許

上面咱們說了，layout viewport = document.documentElement.clientWidth、visual viewport = window.innerWidth。因爲移動端沒有那個17px的滾動條，因此layout viewport ≈≈≈ visual viewport.

 

 五、關於縮放以及initial-scale的默認值

 　  1）、initial-scale=1能夠達到和width=device-width同樣的效果，由於全部的scale指令都是相對於ideal viewport的。無視layout viewport設置了多少，因此maximum-scale=3意味着最大的縮放值是ideal viewport的300%。

　　2）、最後再來看看initial-scale、visual viewport、ideal viewport關係：

當前縮放值 = ideal viewport寬度  / visual viewport寬度

 

總結：

一、layout viewport和visual viewport關係。

即document.documentElement.clientWidth和window.innerWidth的概念必須搞清楚：document.documentElement.clientWidth/Height的值爲可視窗口內部大小，不包括工具欄和水平或垂直滾動條。 window.innerWidth/Height的值也是可視窗口內部大小加上滾動條寬度。 

二、meta標籤中，若是設置了width=device-width 也就是將layout viewport（佈局視口）的寬度設置 ideal viewport（理想視口）的寬度。width=device-width和initial-scale=1指令均可以作到。

三、當前縮放值 = ideal viewport寬度 / visual viewport寬度。

 

因此， <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> 就是讓 layout viewport === ideal viewport === visual viewport.

參考連接：http://www.cnblogs.com/2050/p/3877280.html#!comments