理解移動端viewport

參考文檔：Safari Web Content Guide

首先要弄清楚 三個視口 的概念，分別是：視覺視口、佈局視口、理想視口 ##1.視覺視口 就是指用戶的可見視野。 ##2.佈局視口 或許你不知道'佈局視口'這個概念，可是在移動端頁面中，你確定用過下面這行代碼。這行代碼的做用就是設置佈局視口。

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

佈局視口主要是針對移動端而言，對於pc端而言，佈局視口和視覺視口是一個概念。爲何移動端會分開這兩個概念呢？

移動端的瀏覽器在顯示一個沒有針對移動端特殊設計的pc端網頁時，若是佈局視口仍是採用視覺視口，那麼空間嚴重不夠。

下圖是將一個寬度爲980px的網頁顯示在佈局視口分別爲320px和980px的瀏覽器中。在佈局視口爲980px時，網頁恰好顯示完整，而在佈局視口爲320px時(好比在iPhone5下，佈局視口採用視覺視口的大小)，只有灰色的方塊部分可以顯示出來，其餘部分均須要用戶移動網頁才能看見。真是糟糕的體驗。

會將網頁縮小，方便移動端用戶查看。這就是經過改變佈局視口實現的，大多數瀏覽器會把這個視口設置爲980px。你能夠經過chrome的模擬器查看。

佈局視口的大小就是給你的‘畫布’大小，你的整幅畫會完整的顯示在視覺視口中（固然你不能把畫繪製在畫布外）。所以，一樣大小px定義的元素，在移動端看到的會比pc端小。以下圖，紅色的方塊

.test1{
            width: 200px;
            height: 200px;
            background: red;
        }

pc端：

移動端：

##3.理想視口 就是你們以爲在該設備該瀏覽器下最理想的佈局視口大小。瀏覽器產商有可能爲不一樣瀏覽器，或者同一瀏覽器在不一樣設備下設置不同的理想視口。

##4.怎樣設置佈局視口 由於viewport這一律念最早由apple提出並使用，後來被其餘瀏覽器採用。所以我翻譯了apple對viewport設置的部分官方引導。

###4.1默認設置 默認寬度爲980px，絕大多數網站均可以很好的顯示。若是你的網站顯示定義了寬度小於980px，就會以下圖右邊；若是你的網頁的寬度大於980px，就會出現滾動條。解決方法很簡單，設置viewport爲你的網頁寬度。so easy！！

###4.2修改佈局視口 其實垂直滾動條在移動端已經很常見，用戶也已經很適應。所以我以爲只要設置佈局視口的寬度就好。若是是專門的移動端網站、應用，建議將佈局視口的寬度設置爲設備的寬度，即：

<meta name="viewport" content="width=device-width">

對於一些短時間營銷H5，咱們沒有必要經過rem來作適配。只須要將佈局視口寫死，瀏覽器會自動在不一樣的設備上進行縮放。

<meta name="viewport" content="width=640">

關於viewport的屬性有不少，你沒必要一一設置，下面將說明Safari怎樣推斷咱們沒有設置的屬性值。

##5.Safari怎樣推斷沒有設置的屬性值 ###5.1僅僅設置了initial scale爲1 Safari on iOS會自動將viewport的寬度設置爲設備寬度；若是用戶橫屏，它會將viewport的寬度設置爲設備的高度。

###5.2僅僅設置了width爲device-width 此時不管橫豎屏，viewport的寬度都爲device-width

###5.3設置了width和initial-width

##6.通用作法

<meta name = "viewport" content = "user-scalable=no, width=device-width,initial-scale=1">