視口

• PC端：視口指瀏覽器可視化區(qū)域，寬度和瀏覽器窗口的寬度一致。在 CSS 標(biāo)準(zhǔn)文檔中，視口也被稱為初始包含塊，它是所有 CSS 百分比寬度推算的根源，給 CSS 布局限制了一個最大寬度。

• 移動端：涉及三個視口，布局視口（layout viewport）、視覺視口（visual viewport）和理想視口（ideal viewport）。

布局視口layout viewport

小屏幕的移動端設(shè)備，主要是手機和部分平板（屏幕特別巨大的除外＝ ＝ ），如果讓視口的寬度和瀏覽器寬度 保持一致的話，會導(dǎo)致一個結(jié)果——-頁面很丑。

手機，平板，瀏覽器的寬度一般在240-640像素之間，而大…大多數(shù)給pc設(shè)計的寬度至少為800，一般是960，或者1080。因此，如果用手機去看剛才的那個頁面，寬度20%的aside將會非常窄。

一個為桌面設(shè)計的網(wǎng)站 在780～ 1260px 的視口中應(yīng)該會顯示的很好，20% 寬度的元素也會大致像設(shè)計師希望的那樣。

但是，如果移動端瀏覽器遇到了沒有為移動端做優(yōu)化的網(wǎng)站，它會盡可能的縮小網(wǎng)站讓用戶看到網(wǎng)站的全貌。所以就顯得很擠，字體很小，閱讀性很差。這樣用戶就只有通過放大，去看想看的信息。

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

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

layout viewport的大小獲?。?/p>

document.documentElement.clientWidth
document.document.clientHeight

視覺視口visual viewport

視覺視口是用戶當(dāng)前看到的區(qū)域，用戶可以通過縮放操作視覺視口，同時不會影響布局視口。

用來顯示網(wǎng)頁內(nèi)容的區(qū)域，可以通過下面的js命令獲?。?/p>

window.innerWidth
window.innerHeight

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

screen.width和screen.height，主要是用來獲取整個屏幕的大小的，而window.innerWidth和window.innerHeight只是獲取瀏覽器可用顯示區(qū)域的大小，也就是瀏覽器中間負責(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是我們可以直觀看到的，不嚴謹?shù)恼f，就是差不多等于手機屏幕的大小，偏向于一個物理概念。

理想視口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中完美顯示。

用下面的方法可以使布局視口與理想視口的寬度一致:

//理想視口=布局視口=邏輯像素值
<meta name="viewport" content="width=device-width">

實際上，這就是響應(yīng)式布局的基礎(chǔ)。

視口的設(shè)置

我們可以使用視口元標(biāo)簽（viewport meta 標(biāo)簽）來進行布局視口的設(shè)置。

<meta name="viewport"
    content="width=device-width,initial-scale=1.0,maximum-scale=1">

有幾點值得注意：

• viewport 標(biāo)簽只對移動端瀏覽器有效，對 PC 端瀏覽器是無效的
• 當(dāng)縮放比例為 100% 時，邏輯像素 = CSS 像素寬度 = 理想視口的寬度 = 布局視口的寬度
• 單獨設(shè)置 initial-scale 或 width 都會有兼容性問題，所以設(shè)置布局視口為理想視口的最佳方法是同時設(shè)置這兩個屬性
• 即使設(shè)置了 user-scalable = no，在 Android Chrome 瀏覽器中也可以強制啟用手動縮放

小結(jié)

layout viewport和ideal viewport都是用來渲染頁面，layout viewport較大，用來渲染電腦上的頁面，ideal viewport較小，用來渲染專門針對手機設(shè)計的頁面；而visual viewport是用來查看layout viewport和ideal viewport的，是用來查看渲染的結(jié)果的。visual viewport是很具體的，而layout viewport和ideal viewport是比較抽象的。某種程度來說，layout viewport和ideal viewport可以理解成是兩種尺寸，承載頁面渲染的盒子，可以設(shè)置成layout viewport的尺寸，也可以設(shè)置成ideal viewport的尺寸，而且在默認情況下是layout viewport的尺寸。如果我們設(shè)置HTML中body為width:100%，那么這個body的實際寬度，將由這個盒子的寬度決定。