移動端開發viewport用法詳解

在進行移動端頁面開發的時候，通常會在頁面的頭部發下如下程式碼:

[HTML] 純文字檢視 複製程式碼
<meta name="viewport" content="width=device-width,height=device-height,inital-scale=1.0,maximum-scale=1.0,user-scalable=no;" />

viewport在移動端是一個非常重要的概念，下面就介紹一下它的相關內容，希望能夠給需要的朋友帶來一定的幫助。

當用手機去瀏覽一個為桌面瀏覽器設計的網站的時候，你會發現手機瀏覽器也能夠將頁面完整的展現，截圖如下:

上面的截圖是預設狀態下，訪問桌面版本的截圖，雖然能夠比較完美的展現整個頁面，但是問題也出現了，那就是頁面內容太小了，需要不斷的放大縮小來檢視或者查詢頁面的內容，非常的不方便。

顯示頁面的這個視口我們就稱作為viewport。大家知道移動裝置的螢幕要比pc端的小很多，比如iphone4，它的螢幕是320x480（裝置獨立畫素）的，它之所以能夠完整的顯示本站的桌面頁面，是因為將一個較大的虛擬視窗對映到手機螢幕上，預設情況下，寬度通常是980px（不同的裝置，此值也不同），這個時候viewport的寬度值是980px。當然我們也可以人為的設定viewport的大小，程式碼如下:

[HTML] 純文字檢視 複製程式碼
<meta name="viewport" content="width=600,inital-scale=1.0,user-scalable=yes;" />

上面的程式碼將viewport的值設定為500px，但是在實際應用中，通常將視口的寬度設定為裝置寬度。

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

引數介紹:

（1）.width：控制 viewport 的大小，可以指定的一個值，如果 600，或者特殊的值，如 device-width 為裝置的寬度。

（2）.height：和 width 相對應，指定高度。

（3）.initial-scale：初始縮放比例，也即是當頁面第一次 load 的時候縮放比例。

（4）.maximum-scale：允許使用者縮放到的最大比例。

（5）.minimum-scale：允許使用者縮放到的最小比例。

（5）.user-scalable：使用者是否可以手動縮放。