viewport 測試以及總結

這裏的總結的主要思想是ppk的文章（文末附有連接），加入了本身的總結，下面的測試用的是iphone5s，android是安卓5.5吋的手機，只是爲了直觀感覺和方便解釋拿了空出來的測試機給出的數據。詳細具體的數據能夠參考ppk的原文章：

layout viewport

瀏覽器默認 layout viewport，寬度能夠經過 document.documentElement.clientWidth 來獲取，iphone通常寬度是980，高度是1739。固然這 viewport 顯然是通常是大於移動端屏幕大小的（如今我以爲很差說...），是移動端瀏覽器爲了適應網站在大屏幕的顯示效果設置的。

• layout viewport 是一個圖層同樣的東西，等於或者大於 visual viewport，放大縮小不會改變。
• clientWidth 的獲取要在不設置 html 和 body 寬度的狀況下，不然會變成設置的寬度。
• 瀏覽器每次初始化頁面會先計算出這個值，若是設置了 width 或者 initial-width，會根據這兩個值去計算寬度。iphone 會從 width 或者 initial-scale中挑大的，

iphone表現以下：

android表現以下：

visual viewport

瀏覽器可視區域的大小 visual viewport，visual viewport的寬度能夠經過 window.innerWidth 來獲取，Android 2, Oprea mini 和 UC 8中沒法正確獲取。有個網站 http://viewportsizes.com/ 上面會標明，不過上面的數據已經很舊了，並且主要看的也是iphone的數據，文中指出iphone都是320，其實已經否則，i6 375，i6p 414，我以前有文章鋪墊地總結一些，這是邏輯分辨率的寬度。
ppk 文章裏有句話比較關鍵

The visual viewport is the part of the page that’s currently shown on-screen. The user may scroll to change the part of the page he sees, or zoom to change the size of the visual viewport.
visual viewport 是個圖層窗口寬度同樣的東西，是圖層 layout viewport 的一部分，放大縮小會影響大小。

iphone的表現

android的表現

ideal viewport

移動設備的理想 ideal viewport，ideal viewport 的意義在於，不管在何種分辨率的屏幕下，那些針對 ideal viewport 而設計的網站，不須要用戶手動縮放，也不須要出現橫向滾動條，均可以完美的呈現給用戶。

• ideal viewport 其實就是邏輯分辨率

在實際開發中，咱們要設置的是 layout viewport，同時要使 visual viewport 等於 layout viewport。那麼經過上面的表格，容易知道安卓有三種狀況：

1. 只設置 width。
2. 只設置 initial-scale 爲1。
3. 設置 width 爲邏輯分辨率且設置 initial-scale 爲1。
   第一種和第三種是可行的，第一種就是好比設置 width=750，而後全部尺寸按照750設計圖來寫，第三種就是淘寶 lib-flexible 的方案。

iphone 也有三種狀況：

1. 只設置 width。
2. 只設置 initial-scale。
3. 設置 width 和 initial-scale 相同。
   第三種不太靠譜，由於小數點的存在不會那麼精確。第一種對應安卓的第一種，第二中對應淘寶 lib-flexible 的蘋果方案。

總結的部分基本到這裏了，其實要有一些概念來看可能纔看得懂，下面附帶主要參考的文章連接。我的以爲完全理解仍是要看ppk的文章，特別是第三篇。以前偷懶看翻譯文章，後來發現翻譯各類意猶未盡，因此仍是推薦看原文爽快。如今的適配已經有vw的方案了，陸陸續續也看到了一些文章，專一移動端優化的童鞋可要趕忙了；）

本文來源：JuFoFu

本文地址：http://www.cnblogs.com/JuFoFu/p/7719916.html

水平有限，錯誤歡迎指正，轉載請註明出處。

參考連接：
使用Flexible實現手淘H5頁面的終端適配
http://www.w3cplus.com/mobile/lib-flexible-for-html5-layout.html
移動前端開發之viewport的深刻理解
http://www.cnblogs.com/2050/p/3877280.html
ppk的文章系列
第一篇
https://www.quirksmode.org/mobile/viewports.html
第二篇
https://www.quirksmode.org/mobile/viewports2.html
第三篇
https://www.quirksmode.org/mobile/metaviewport/