利用meta標籤對viewport進行控制
移動設備默認的viewport是layout viewport，但在進行移動設備網站的開發時，我們需要的是ideal viewport。這就使用meta標籤來設置移動端顯示的比例。
我們在開發移動設備的網站時，最常見的的一個動作就是把下面這個東西複製到我們的head標籤中：
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
該meta標籤的作用是讓當前viewport的寬度等於設備的寬度，同時不允許用戶手動縮放。如果在進行移動端開發時不這樣的設定的話，那就會使用那個比屏幕寬的默認viewport，網站在手機端顯示時會出現橫向滾動條。
meta viewport 標籤首先是由蘋果公司在其safari瀏覽器中引入的，目的就是解決移動設備的viewport問題。後來安卓以及各大瀏覽器廠商也都紛紛效仿，引入對meta viewport的支持，事實也證明這個東西還是非常有用的。
meta viewport 的屬性
在蘋果的規範中，meta viewport 有6個屬性(暫且把content中的那些東西稱爲一個個屬性和值)，如下：
| width | 設置layout viewport 的寬度，爲一個正整數，或字符串"width-device" |
| initial-scale | 設置頁面的初始縮放值，爲一個數字，可以帶小數 |
| minimum-scale | 允許用戶的最小縮放值，爲一個數字，可以帶小數 |
| maximum-scale | 允許用戶的最大縮放值，爲一個數字，可以帶小數 |
| height | 設置layout viewport 的高度，這個屬性對我們並不重要，很少使用 |
| user-scalable | 是否允許用戶進行縮放，值爲"no"或"yes", no 代表不允許，yes代表允許 |
這些屬性可以同時使用，也可以單獨使用或混合使用，多個屬性同時使用時用逗號隔開就行了。
把當前的viewport寬度設置爲 ideal viewport 的寬度
要得到ideal viewport就必須把默認的layout viewport的寬度設爲移動設備的屏幕寬度。因爲meta viewport中的width能控制layout viewport的寬度，所以我們只需要把width設爲device-width這個特殊的值就行了。
<meta name="viewport" content="width=device-width">
要把當前的viewport寬度設爲ideal viewport的寬度，既可以設置 width=device-width，也可以設置 initial-scale=1，但這兩者各有一個小缺陷，就是iphone、ipad以及IE 會橫豎屏不分，通通以豎屏的ideal viewport寬度爲準。所以，最完美的寫法應該是，兩者都寫上去，這樣就 initial-scale=1 解決了 iphone、ipad的毛病，width=device-width則解決了IE的毛病：