你可能不知道的viewport
概述
前幾天偶然看到一個pc端網頁，發現用手機打開竟然同比縮放了，作為一個前端從業者，我自然想要弄清它到底是怎麽縮放的。之後查了它的meta信息，css和js，發現沒有任何兼容手機端的代碼，那它到底是怎麽縮放的呢？百思不得其解，最後無意中看別人說viewport的默認值是980px，才知道原來是viewport的鍋。
於是我深入的復習了一下viewport相關知識，把心得記錄下來，供以後開發時參考，相信對其他人也有用。
基礎概念
本來看了移動前端開發之viewport的深入理解，但是仍然有一些概念不理解，於是去看了PPK大神對於viewport的研究（第一篇，第二篇，第三篇），算是理清了。
首先從css像素和實際像素說起，css像素就是我們寫的css的像素，如果沒有進行任何縮放的話，css像素就和實際像素是一樣的，如果用瀏覽器對頁面進行了縮放，那麽css像素不變，實際像素會根據縮放比例變化
值得一提的是，縮放是個很重要的概念，在pc端的網頁一般沒有進行縮放，所以1px的css像素常常等於1px的實際像素。
- 取viewport寬高，用document.documentElement.clientWidth和document.documentElement.Height。
- 取設備寬高，用screen.width和screen.height。
- 取窗口可視區域寬高，用window.innerWidth和window.innerHeight。
- 取可視區域偏移量，用window.pageXOffset和window.pageYOffset。
viewport寬高
viewport寬高是用document.documentElement.clientWidth和document.documentElement.Height來取到的。細心觀察可以發現，document.documentElement就是html元素
我們知道，css裏面的包含塊的寬度會自動延伸至父元素的寬度，所以最外層包含塊的寬度會延伸到body的寬度，而body的寬度會延伸到html的寬度，那html的寬度延伸到什麽寬度呢？答案是viewport的寬度！所以可以用html的寬度來度量viewport的寬度。
另外，這裏有一個小坑，就是html的寬度是可以修改的，但是即使修改了html的寬度，document.documentElement.clientWidth和document.documentElement.Height的值仍然是viewport的寬高
那當我們改了html的寬度之後，怎麽獲得html的寬高呢？方式是利用document.documentElement.offsetWidth和document.documentElement.offsetHeight.
移動端viewport
明白了上面viewport的寬高機制之後就很好理解移動端的viewport了。
移動端由於設備的像素很小，所以如果不進行縮放的話，就只能看到pc端網頁的部分內容，所以移動端瀏覽器在兼容的時候，會對頁面進行縮放，但是為了避免在縮放的時候頁面發生重排和重繪，瀏覽器就有2個viewport，一個是我們常說的viewport，它用來放置頁面，它的默認值寬度是980px；另一個是可視區域的visual viewport，它是移動端的可視區域，用來放大或縮小。
在pc端，我們常說的viewport就等於可視區域的visual viewport，所以css像素和實際像素比是1比1。
在移動端，由於放置頁面的viewport的寬度默認為980px，但是設備的寬度常常小於980px，所以可視區域的viewport會對它進行縮放，直到頁面內容的寬度正好達到屏幕的寬度。所以我們用手機端看到的pc端頁面都是已經縮放過的（如果頁面沒有設置viewport的話）。
註意，有些情況下，可視區域的viewport的寬度不會等於放置頁面的viewport的寬度。比如有一個頁面，我們設置它的最外層包含塊的最小寬度為1250px，那麽放置頁面的viewport的寬度仍是默認值980px，但是可視區域的viewport的寬度會達到1250px。
那怎麽得到可視區域的縮放比例呢？它等於設備的寬度除以可視區域的寬度，即：screen.width/window.innerWidth。（註意不是viewport的寬度）
其他寬度信息也可以按照上面列出的方法來取。
修改viewport
如果是專門為移動端做的頁面，那麽常常要設置viewport，使它的兩個viewport都等於設備寬度。代碼如下：
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">viewport的其它設置方法可以參考：移動前端開發之viewport的深入理解
你可能不知道的viewport