meta viewport詳解

首先看一個簡短的程式碼例項：

[HTML] 純文字檢視 複製程式碼
<meta name="viewport" content="width=640">

上面程式碼將視口的寬度設定為640px；<meta name="viewport">用來控制移動端viewport視口。

關於viewport視口更多內容可以參閱viewport視口詳解一章節。

移動端視口預設是佈局視口，並且不允許使用者手動縮放，但移動端通常需要的是完美視口，所以就需要通過meta viewport對視口大小進行控制，看一個程式碼例項：

[HTML] 純文字檢視 複製程式碼執行程式碼
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

上面程式碼將視口的寬度設定為裝置獨立畫素寬度，預設無縮放，並且也不允許使用者縮放。

引數解析：

（1）.width：設定視口的寬度，可以是具體的畫素值，也可以特定引數，例如device-width。

[HTML] 純文字檢視 複製程式碼執行程式碼
<meta name="viewport" content="width=640"> <!--視口寬度為640px--> 
<meta name="viewport" content="width=device-width"> <!--視口寬度為裝置螢幕的寬度（裝置獨立畫素）-->

（2）.initial-scale：設定頁面的初始縮放值，為一個數字，可以帶小數。

[HTML] 純文字檢視 複製程式碼執行程式碼
<meta name="viewport" content="width=device-width, initial-scale=1.0">

設定初始縮放為1.0，也就是不縮放。

（3）.minimum-scale：設定視口最小縮放值，一個數字，可以帶小數。

[HTML] 純文字檢視 複製程式碼執行程式碼
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=0.5">

設定最小所放置為0.5，也就是可以將視口縮小一半。

（4）.maximum-scale：設定視口最大所放置，一個數字，可以帶小數。

[HTML] 純文字檢視 複製程式碼執行程式碼
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=0.5,maximum-scale=2">

設定最大縮放為2，也就是可以將視口最大縮放兩倍。

（5）.height：設定視口的高度，此使用通常不會使用，不多做介紹。

（6）.user-scalable：設定是否是否可以縮放。

[HTML] 純文字檢視 複製程式碼執行程式碼
<meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=0">

設定視口不可以進行縮放操作。

特別說明：縮放是以完美視口尺寸為參考進行的，所以使用如下方式也可以將視口設定為完美視口：

[HTML] 純文字檢視 複製程式碼執行程式碼
<meta name="viewport" content="initial-scale=1.0">

不設定width=device-width，將初始縮放設定為1即可將視口寬度設定為完美視口寬度。

上述方式有一定的瀏覽器相容問題，所以最好兩者都寫上：

[HTML] 純文字檢視 複製程式碼執行程式碼
<meta name="viewport" content="width=device-width, initial-scale=1.0">

width與initial-scale=1是否衝突：

設定initial-scale=1表示將視口設定為裝置寬度，如果此時設定width非裝置寬度是否會造成衝突。

此種情況瀏覽器會以較大的那個為標準，如果設定width為440px，而裝置寬度為320px，那麼就以440px為準。