[TOC] # 視口 視口(`viewport`)代表當前可見的計算機圖形區域。在`Web`瀏覽器術語中，通常與瀏覽器窗口相同，但不包括瀏覽器的`UI`， 菜單欄等——即指你正在瀏覽的文檔的那一部分。 <br> 一般我們所說的視口共包括三種：布局視口、視覺視口和理想視口，它們在屏幕適配中起著非常重要的作用。 <br> <br> # 布局視口  <br> 布局視口(`layout viewport`)：當我們以百分比來指定一個元素的大小時，它的計算值是由這個元素的包含塊計算而來的。當這個元素是最頂級的元素時，它就是基于布局視口來計算的。 <br> 所以，布局視口是網頁布局的基準窗口，在`PC`瀏覽器上，布局視口就等于當前瀏覽器的窗口大小（不包括`borders` 、`margins`、滾動條）。 <br> 在移動端，布局視口被賦予一個默認值，大部分為`980px`，這保證`PC`的網頁可以在手機瀏覽器上呈現，但是非常小，用戶可以手動對網頁進行放大。 <br> 我們可以通過調用`document.documentElement.clientWidth / clientHeight`來獲取布局視口大小。 <br> 如果要顯式設置布局視口，可以使用 HTML 中的 meta 標簽： ~~~ <meta name="viewport" content="width=400"> ~~~ <br> # 視覺視口  <br> 視覺視口(`visual viewport`)：用戶通過屏幕真實看到的區域。 <br> 視覺視口默認等于當前瀏覽器的窗口大小（包括滾動條寬度）。 <br> 當用戶對瀏覽器進行縮放時，不會改變布局視口的大小，所以頁面布局是不變的，但是縮放會改變視覺視口的大小。 <br> 例如：用戶將瀏覽器窗口放大了`200%`，這時瀏覽器窗口中的`CSS像素`會隨著視覺視口的放大而放大，這時一個`CSS`像素會跨越更多的物理像素。 <br> 所以，布局視口會限制你的`CSS`布局而視覺視口決定用戶具體能看到什么。 <br> 我們可以通過調用`window.innerWidth / innerHeight`來獲取視覺視口大小。 <br> # 理想視口  <br> 布局視口在移動端展示的效果并不是一個理想的效果，所以理想視口(`ideal viewport`)就誕生了：網站頁面在移動端展示的理想大小。 <br> 如上圖，我們在描述設備獨立像素時曾使用過這張圖，在瀏覽器調試移動端時頁面上給定的像素大小就是理想視口大小，它的單位正是設備獨立像素。 <br> 上面在介紹`CSS像素時`曾經提到`頁面的縮放系數 = CSS像素 / 設備獨立像素`，實際上說`頁面的縮放系數 = 理想視口寬度 / 視覺視口寬度`更為準確。 <br> 所以，當頁面縮放比例為`100%`時，`CSS像素 = 設備獨立像素`，`理想視口 = 視覺視口`。 <br> 我們可以通過調用`screen.width / height`來獲取理想視口大小。 <br> # Meta viewport `<meta>` 元素表示那些不能由其它`HTML`元相關元素之一表示的任何元數據信息，它可以告訴瀏覽器如何解析頁面。 <br> 我們可以借助`<meta>`元素的`viewport`來幫助我們設置視口、縮放等，從而讓移動端得到更好的展示效果。 <br> ~~~ <meta name="viewport" content="width=device-width; initial-scale=1; maximum-scale=1; minimum-scale=1; user-scalable=no;"> 復制代碼 ~~~ <br> 上面是`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。 | <br> # 移動端適配 為了在移動端讓頁面獲得更好的顯示效果，我們必須讓布局視口、視覺視口都盡可能等于理想視口。 <br> `device-width`就等于理想視口的寬度，所以設置`width=device-width`就相當于讓布局視口等于理想視口。 <br> 由于`initial-scale = 理想視口寬度 / 視覺視口寬度`，所以我們設置`initial-scale=1;`就相當于讓視覺視口等于理想視口。 <br> 這時，1個`CSS`像素就等于1個設備獨立像素，而且我們也是基于理想視口來進行布局的，所以呈現出來的頁面布局在各種設備上都能大致相似。 <br> # 縮放 上面提到`width`可以決定布局視口的寬度，實際上它并不是布局視口的唯一決定性因素，設置`initial-scale`也有肯能影響到布局視口，因為布局視口寬度取的是`width`和視覺視口寬度的最大值。 <br> 例如：若手機的理想視口寬度為`400px`，設置`width=device-width`，`initial-scale=2`，此時`視覺視口寬度 = 理想視口寬度 / initial-scale`即`200px`，布局視口取兩者最大值即`device-width` `400px`。 <br> 若設置`width=device-width`，`initial-scale=0.5`，此時`視覺視口寬度 = 理想視口寬度 / initial-scale`即`800px`，布局視口取兩者最大值即`800px`。 # 獲取瀏覽器大小  * `window.innerHeight`：獲取瀏覽器視覺視口高度（包括垂直滾動條）。 * `window.outerHeight`：獲取瀏覽器窗口外部的高度。表示整個瀏覽器窗口的高度，包括側邊欄、窗口鑲邊和調正窗口大小的邊框。 * `window.screen.Height`：獲取獲屏幕取理想視口高度，這個數值是固定的，`設備的分辨率/設備像素比` * `window.screen.availHeight`：瀏覽器窗口可用的高度。 * `document.documentElement.clientHeight`：獲取瀏覽器布局視口高度，包括內邊距，但不包括垂直滾動條、邊框和外邊距。 * `document.documentElement.offsetHeight`：包括內邊距、滾動條、邊框和外邊距。 * `document.documentElement.scrollHeight`：在不使用滾動條的情況下適合視口中的所有內容所需的最小寬度。測量方式與`clientHeight`相同：它包含元素的內邊距，但不包括邊框，外邊距或垂直滾動條。 <br> <br> # 參考資料 [關于移動端適配，你必須要知道的](https://juejin.im/post/5cddf289f265da038f77696c)