關于移動端布局，有三個viewport需要了解，這三個viewport的出現(xiàn)是為了解決網(wǎng)頁完美適配移動端屏幕的問題

1. layout viewport：布局視圖

   layout viewport就是用于css布局的一個viewport，關于這個viewport，各家瀏覽器廠商會默認設置一個值，譬如 就設置了980px的默認值，所以默認的 的寬度就是980px，這也就是html的width(當然，此時若某一個子元素寬度超過這個寬度也可以強行撐大布局，但是html的寬度還是不變，其他子元素的布局還是按html的寬度進行布局，只有超出的那個特殊情況，例如在設置width=device-width，initial-scale=1時，本來應該是不會出現(xiàn)水平滾動條的，此時就按照屏幕完美顯示，但是如果此時某一個div的寬度設為500px，那么就出現(xiàn)了水平滾動條，但是html還是device-width那么寬)

   當不設置viewport標簽時，頁面在移動端的顯示就相當于此時layout viewport的寬度就是默認值（eg：980px），visual viewport的寬度應該是一個比layout viewport稍大的值（應該是只有在這種情況下visual viewport的值才會比layout viewport的值大，其他情況下layout viewport的值均大于等于visual viewport的大小）

   width=device-width設置的就是layout viewport

2. visual viewport：可視視口

   visual viewport首先與手機設備有關，其次，即使是同一臺設備，其visual viewport也不是一成不變的，其寬度是等于device-width/scale的，也就是說縮放值越大，visual viewport寬度就越小，因為當放大時，一個邏輯像素對應的物理像素就多了，相當于此時改變的是DPR，而一屏的物理像素是固定的，那么一屏所表示的邏輯像素就減小了，也就是visual viewport寬度變小了。對于initial-scale的設置就是對visual viewport的設置

3. ideal viewport：理想視口，這個其實作用不大，當布局視口等于可視視口等于設備的寬度時就是理想視口了。

總結

1. 默認情況下 layout viewport 為 980px
2. width=x設置布局視口，initial-scale=y 設置視覺視口
3. 如果只設置 layout viewport 和 visual viewport 中的一個，那么另一個也是同樣的寬度
4. layout viewport 的寬度始終大于等于 visual viewport(實踐發(fā)現(xiàn)，當默認情況下，即不設置viewport時，visual viewport會略大于layout viewport)
5. 當同時設置width和initial-scale時，layout viewport的寬度取兩者計算出來的較大值，而visual viewport的值就是通過initial scale計算出來的值，之所以前者取較大值就是因為layout viewport的寬度不小于visual viewport的寬度，即第四條總結

番外

做移動端適配時經(jīng)常聽到1px邊框的問題，這是個什么梗？為什么是1px？為什么是邊框？

設計師要的1px是一個物理像素，也就是所能設計出來的最細的線，而css中的1px是一個點，dpr為2的話，那么就是兩個物理像素了，這就不是設計師要的細線了。

通常邊框我們并不需要它隨著屏幕越大而越粗，也就是不需要它自適應，所以不能用rem，只能用px，雖然蘋果支持0.5px，但是有的安卓機不支持，0.5px可能就直接顯示不出來而被忽略掉，所以還是寫1px，那用什么辦法，讓設計師看到它想要的細線呢？（安卓機是看不出來的）

視口縮放scale=0.5就能滿足要求，這樣可以不用改動任何代碼。視口縮放是最簡單的方式（已經(jīng)證明過了視口縮放不會影響rem元素大?。?。

還有一種方式就是檢測到支持細線的，給html元素加一個類名hairlines，然后在css里面適配寫0.5px的邊框，這也是淘寶最新的方案flexible.js，不過這種方式需要增加很多邊框適配的css，所有細線效果都要重寫為0.5px，有點麻煩。