視口(viewport)代表當前可見的計算機圖形區域。在Web瀏覽器術語中，通常與瀏覽器窗口相同，但不包括瀏覽器的UI， 菜單欄等——即指你正在瀏覽的文檔的那一部分。

一般我們所說的視口共包括三種：布局視口、視覺視口和理想視口，它們在屏幕適配中起著非常重要的作用。

布局視口

布局視口(layout viewport)：當我們以百分比來指定一個元素的大小時，它的計算值是由這個元素的包含塊計算而來的。當這個元素是最頂級的元素時，它就是基于布局視口來計算的。

所以，布局視口是網頁布局的基準窗口，在PC瀏覽器上，布局視口就等于當前瀏覽器的窗口大小(不包括borders 、margins、滾動條)。

在移動端，布局視口被賦予一個默認值，大部分為980px，這保證PC的網頁可以在手機瀏覽器上呈現，但是非常小，用戶可以手動對網頁進行放大。

我們可以通過調用document.documentElement.clientWidth / clientHeight來獲取布局視口大小。

視覺視口

視覺視口(visual viewport)：用戶通過屏幕真實看到的區域。

視覺視口默認等于當前瀏覽器的窗口大小(包括滾動條寬度)。

當用戶對瀏覽器進行縮放時，不會改變布局視口的大小，所以頁面布局是不變的，但是縮放會改變視覺視口的大小。

例如：用戶將瀏覽器窗口放大了200%，這時瀏覽器窗口中的CSS像素會隨著視覺視口的放大而放大，這時一個CSS像素會跨越更多的物理像素。

所以，布局視口會限制你的CSS布局而視覺視口決定用戶具體能看到什么。

我們可以通過調用window.innerWidth / innerHeight來獲取視覺視口大小。

理想視口

布局視口在移動端展示的效果并不是一個理想的效果，所以理想視口(ideal viewport)就誕生了：網站頁面在移動端展示的理想大小。

如上圖，我們在描述設備獨立像素時曾使用過這張圖，在瀏覽器調試移動端時頁面上給定的像素大小就是理想視口大小，它的單位正是設備獨立像素。

上面在介紹CSS像素時曾經提到頁面的縮放系數 = CSS像素 / 設備獨立像素，實際上說頁面的縮放系數 = 理想視口寬度 / 視覺視口寬度更為準確。

所以，當頁面縮放比例為100%時，CSS像素 = 設備獨立像素，理想視口 = 視覺視口。

我們可以通過調用screen.width / height來獲取理想視口大小。

Meta viewport

元素表示那些不能由其它HTML元相關元素之一表示的任何元數據信息，它可以告訴瀏覽器如何解析頁面。

我們可以借助元素的viewport來幫助我們設置視口、縮放等，從而讓移動端得到更好的展示效果。

上面是viewport的一個配置，我們來看看它們的具體含義：

Value 可能值 描述 width 正整數或device-width 以pixels(像素)為單位， 定義布局視口的寬度。 height 正整數或device-height 以pixels(像素)為單位， 定義布局視口的高度。 initial-scale 0.0 - 10.0 定義頁面初始縮放比率。 minimum-scale 0.0 - 10.0 定義縮放的最小值；必須小于或等于maximum-scale的值。 maximum-scale 0.0 - 10.0 定義縮放的最大值；必須大于或等于minimum-scale的值。 user-scalable 一個布爾值(yes或者no) 如果設置為 no，用戶將不能放大或縮小網頁。默認值為 yes。

移動端適配

為了在移動端讓頁面獲得更好的顯示效果，我們必須讓布局視口、視覺視口都盡可能等于理想視口。

device-width就等于理想視口的寬度，所以設置width=device-width就相當于讓布局視口等于理想視口。

由于initial-scale = 理想視口寬度 / 視覺視口寬度，所以我們設置initial-scale=1;就相當于讓視覺視口等于理想視口。

這時，1個CSS像素就等于1個設備獨立像素，而且我們也是基于理想視口來進行布局的，所以呈現出來的頁面布局在各種設備上都能大致相似。

縮放

上面提到width可以決定布局視口的寬度，實際上它并不是布局視口的唯一決定性因素，設置initial-scale也有肯能影響到布局視口，因為布局視口寬度取的是width和視覺視口寬度的最大值。

例如：若手機的理想視口寬度為400px，設置width=device-width，initial-scale=2，此時視覺視口寬度 = 理想視口寬度 / initial-scale即200px，布局視口取兩者最大值即device-width 400px。

若設置width=device-width，initial-scale=0.5，此時視覺視口寬度 = 理想視口寬度 / initial-scale即800px，布局視口取兩者最大值即800px。

獲取瀏覽器大小

瀏覽器為我們提供的獲取窗口大小的API有很多，下面我們再來對比一下：

window.innerHeight：獲取瀏覽器視覺視口高度(包括垂直滾動條)。

window.outerHeight：獲取瀏覽器窗口外部的高度。表示整個瀏覽器窗口的高度，包括側邊欄、窗口鑲邊和調正窗口大小的邊框。

window.screen.Height：獲取獲屏幕取理想視口高度，這個數值是固定的，設備的分辨率/設備像素比

window.screen.availHeight：瀏覽器窗口可用的高度。

document.documentElement.clientHeight：獲取瀏覽器布局視口高度，包括內邊距，但不包括垂直滾動條、邊框和外邊距。

document.documentElement.offsetHeight：包括內邊距、滾動條、邊框和外邊距。

document.documentElement.scrollHeight：在不使用滾動條的情況下適合視口中的所有內容所需的最小寬度。測量方式與clientHeight相同：它包含元素的內邊距，但不包括邊框，外邊距或垂直滾動條。

總結

以上是生活随笔為你收集整理的移动端布局三种视口_前端基础：必须要知道的移动端适配（4）——视口的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。