上一篇博文，可算把像素這個東西講清楚了。在這篇博文裏面，將繼續介紹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的，是用來查看渲染的結果的。