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

darkerXi 發(fā)布于2019-08-30 15:55 / 1329人閱讀

摘要：對于，瀏覽器全屏狀態(tài)下，其的值為。的大小可以通過和，實際使用中可能會有一些兼容問題，這跟聲明有關(guān)。是為了能將電腦上的網(wǎng)頁正確的顯示到手機上。調(diào)整的大小，讓其在的查看下有最佳效果，就是我們想要的移動端適配。

上一篇博文，可算把像素這個東西講清楚了。在這篇博文里面，將繼續(xù)介紹viewport相關(guān)的內(nèi)容。

很多博客都會提到PPK所講的三個viewport，有的講的比較復(fù)雜，看的云里霧里，我這里也大概介紹一下，三個viewport主要是相對于移動端而言的。

visual viewport

這個是瀏覽器給我們用的、能真正用來顯示網(wǎng)頁內(nèi)容的區(qū)域，可以通過下面的js命令獲取：

window.innerWidth
window.innerHeight

正如上篇博客所說的，前端里面能獲取到的像素基本上都是CSS像素，所以這個的單位也是CSS像素。對于iPhone X，瀏覽器全屏狀態(tài)下，其window.innerWidth的值為375。

上篇博客中還提到screen.width和screen.height，主要是用來獲取整個屏幕的大小的，而window.innerWidth和window.innerHeight只是獲取瀏覽器可用顯示區(qū)域的大小，也就是瀏覽器中間負(fù)責(zé)顯示的部分。當(dāng)瀏覽器全屏?xí)r，要去掉狀態(tài)欄、標(biāo)簽欄、任務(wù)欄等區(qū)域，當(dāng)瀏覽器非全屏?xí)r，其值更小。由于在移動端，瀏覽器一般都是全屏的，所以大多數(shù)情況下screen.width與window.innerWidth的值相等，也有的博客中說用screen.width和screen.height來獲取visual viewport的大小，就是這個原因。

visual viewport是我們可以直觀看到的，不嚴(yán)謹(jǐn)?shù)恼f，就是差不多等于手機屏幕的大小，偏向于一個物理概念。

layout viewport

網(wǎng)頁最早是出現(xiàn)在電腦上的，上一篇博客中提到，電腦的物理像素可能比手機還要低，但是電腦的設(shè)備無關(guān)像素（或者說是分辨率吧，更嚴(yán)謹(jǐn)一些）是明顯大于手機的設(shè)備無關(guān)像素的，畢竟電腦的屏幕尺寸遠比手機大啊。那些在電腦上的網(wǎng)頁，如果沒有經(jīng)過專門的優(yōu)化，直接搬到手機上看，那么問題就來了，網(wǎng)頁會被擠得變形，相信這種問題大家都遇到過。所以呢，手機廠商為了解決這個問題，設(shè)置了一個layout viewport。

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

做個比喻，layout viewport就是一張大白紙，HTML的內(nèi)容就寫在這個大白紙上，visual viewport就是一個放大鏡，上下左右移動，可以顯示其中的一部分。

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

ideal viewport

Layout viewport是為了能將電腦上的網(wǎng)頁正確的顯示到手機上。當(dāng)瀏覽器拿到一個網(wǎng)頁時，首先會渲染到這個layout viewport里面。可是現(xiàn)在有很多網(wǎng)頁會針對手機做專門的設(shè)計，比如現(xiàn)在的一些H5活動頁，設(shè)計的尺寸就是在手機上看的。此時如果還是把網(wǎng)頁渲染到這個大的layout viewport上，實在是有點不合適了。所以，還應(yīng)該有個ideal viewport，這個ideal viewport應(yīng)該與手機屏幕大小的相同，確切來說，等于visual viewport的大小。把頁面渲染到這個ideal viewport里面，就能在visual viewport中完美顯示。

小結(jié)

根據(jù)我的理解小結(jié)一下：

首先，我們可以假想，layout viewport和ideal viewport都是用來渲染頁面的兩個盒子，HTML頁面渲染在盒子里面，而visual viewport用來查看渲染后的結(jié)果的，相當(dāng)于一個窗口。我們設(shè)置HTML的body為width:100%，那么盒子有多寬，HTML頁面就有多寬。layout viewport用來渲染電腦上的頁面，所以比較大，而ideal viewport較小，用來渲染專門針對手機設(shè)計的頁面。

然而，在瀏覽器的實現(xiàn)中，其實并沒有那么多盒子。就只有一個layout viewport的盒子，頁面就渲染在這個盒子中。layout viewport默認(rèn)是比較大的。如果我們希望渲染到ideal viewport的盒子里面，那就只要調(diào)整這個layout viewport的大小即可，具體如何調(diào)整，將在下一節(jié)中介紹。

綜上，layout viewport用來承載HTML的渲染，visual viewport是查看渲染結(jié)果的窗口，而ideal viewport可以理解成是一種尺寸，其大小等于visual viewport。調(diào)整layout viewport的大小，讓其在visual viewport的查看下有最佳效果，就是我們想要的移動端適配。