移動端適配之二：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都是用來渲染頁面，layout viewport較大，用來渲染電腦上的頁面，ideal viewport較小，用來渲染專門針對手機設計的頁面；而visual viewport是用來查看layout viewport和ideal viewport的，是用來查看渲染的結果的。visual viewport是很具體的，而layout viewport和ideal viewport是比較抽象的。某種程度來講，layout viewport和ideal viewport能夠理解成是兩種尺寸，承載頁面渲染的盒子，能夠設置成layout viewport的尺寸，也能夠設置成ideal viewport的尺寸，並且在默認狀況下是layout viewport的尺寸。若是咱們設置HTML中body爲width:100%，那麼這個body的實際寬度，將由這個盒子的寬度決定。在下一篇博文中，將介紹如何用meta標籤來設置viewport，也就是設置這個承載HTML頁面渲染的盒子的尺寸，從而達到最佳的顯示效果。

來源：http://www.javashuo.com/article/p-nhfxentw-mh.html