移動端適配之二：visual viewport、layout viewport和ideal viewport介紹

上一篇博文，可算把像素這個東西講清楚了。在這篇博文裏面，將繼續介紹viewport相關的內容。

不少博客都會提到PPK所講的三個viewport，有的講的比較複雜，看的雲裏霧裏，我這裏也大概介紹一下，三個viewport主要是相對於移動端而言的。

visual viewport

這個是瀏覽器給咱們用的、能真正用來顯示網頁內容的區域，能夠經過下面的js命令獲取：

window.innerWidth
window.innerHeight

正如上篇博客所說的，前端裏面能獲取到的像素基本上都是CSS像素，因此這個的單位也是CSS像素。對於iPhone X，瀏覽器全屏狀態下，其window.innerWidth的值爲375。

上篇博客中還提到screen.width和screen.height，主要是用來獲取整個屏幕的大小的，而window.innerWidth和window.innerHeight只是獲取瀏覽器可用顯示區域的大小，也就是瀏覽器中間負責顯示的部分。當瀏覽器全屏時，要去掉狀態欄、標籤欄、任務欄等區域，當瀏覽器非全屏時，其值更小。因爲在移動端，瀏覽器通常都是全屏的，因此大多數狀況下screen.width與window.innerWidth的值相等，也有的博客中說用screen.width和screen.height來獲取visual viewport的大小，就是這個緣由。

visual viewport是咱們能夠直觀看到的，不嚴謹的說，就是差很少等於手機屏幕的大小，偏向於一個物理概念。

layout viewport

網頁最先是出如今電腦上的，上一篇博客中提到，電腦的物理像素可能比手機還要低，可是電腦的設備無關像素（或者說是分辨率吧，更嚴謹一些）是明顯大於手機的設備無關像素的，畢竟電腦的屏幕尺寸遠比手機大啊。那些在電腦上的網頁，若是沒有通過專門的優化，直接搬到手機上看，那麼問題就來了，網頁會被擠得變形，相信這種問題你們都遇到過。因此呢，手機廠商爲了解決這個問題，設置了一個layout viewport。

這是一個虛擬的窗口，其大小比手機屏幕大，加載網頁時，直接把HTML渲染在這個虛擬的窗口中，這樣就不會樣式錯亂了。在查看的時候，畢竟手機的visual viewport小啊，那就只能經過滾動條來看了。

作個比喻，layout viewport就是一張大白紙，HTML的內容就寫在這個大白紙上，visual viewport就是一個放大鏡，上下左右移動，能夠顯示其中的一部分。

Layout viewport的大小能夠經過document.documentElement.clientWidth和document.document.clientHeight，實際使用中可能會有一些兼容問題，這跟DOCTYPE聲明有關。不一樣瀏覽器的layout viewport大小不一樣，常見的有980px、1024px。

ideal viewport

Layout viewport是爲了能將電腦上的網頁正確的顯示到手機上。當瀏覽器拿到一個網頁時，首先會渲染到這個layout viewport裏面。但是如今有不少網頁會針對手機作專門的設計，好比如今的一些H5活動頁，設計的尺寸就是在手機上看的。此時若是仍是把網頁渲染到這個大的layout viewport上，實在是有點不合適了。因此，還應該有個ideal viewport，這個ideal viewport應該與手機屏幕大小的相同，確切來講，等於visual viewport的大小。把頁面渲染到這個ideal viewport裏面，就能在visual viewport中完美顯示。

小結

根據個人理解小結一下：

首先，咱們能夠假想，layout viewport和ideal viewport都是用來渲染頁面的兩個盒子，HTML頁面渲染在盒子裏面，而visual viewport用來查看渲染後的結果的，至關於一個窗口。咱們設置HTML的body爲width:100%，那麼盒子有多寬，HTML頁面就有多寬。layout viewport用來渲染電腦上的頁面，因此比較大，而ideal viewport較小，用來渲染專門針對手機設計的頁面。

然而，在瀏覽器的實現中，其實並無那麼多盒子。就只有一個layout viewport的盒子，頁面就渲染在這個盒子中。layout viewport默認是比較大的。若是咱們但願渲染到ideal viewport的盒子裏面，那就只要調整這個layout viewport的大小便可，具體如何調整，將在下一節中介紹。

綜上，layout viewport用來承載HTML的渲染，visual viewport是查看渲染結果的窗口，而ideal viewport能夠理解成是一種尺寸，其大小等於visual viewport。調整layout viewport的大小，讓其在visual viewport的查看下有最佳效果，就是咱們想要的移動端適配。