meta viewport 詳解

admin發表於2018-09-02

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

[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為準。

相關文章