html meta中的viewport指令

http://htmlpreview.github.io/?

http://www.liantu.com/ 在線生成二維碼

meta控制網頁爲全屏幕大小

<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0"/>

 

width - viewport的寬度 height - viewport的高度

initial-scale - 初始的縮放比例
minimum-scale - 容許用戶縮放到的最小比例
maximum-scale - 容許用戶縮放到的最大比例
user-scalable - 用戶是否能夠手動縮放

_________________________________________________________________________________________________

在查看bootstrap教程中，碰到

<meta name="viewport" content="width=device-width, initial-scale=1.0">

 viewport[ˈvju:pɔ:t]  視口；device [dɪˈvaɪs] 設備； initial[ɪˈnɪʃl]最初的；scale  [skeɪl]規模;比例；

minimum-scale - 容許用戶縮放到的最小比例
maximum-scale - 容許用戶縮放到的最大比例

後，在羣兄弟小胡幫助下，知道viewport含義：

ViewPort <meta>標記用於指定用戶是否能夠縮放Web頁面，若是能夠，那麼縮放到的最大和最小縮放比例是什麼。使用 ViewPort <meta>標記還表示文檔針對移動設備進行了優化。ViewPort <meta>標記的content值 是由指令及其值組成的以逗號分隔的列表。

例：

<meta name=」viewport」 content=」width=240, height=320, user-scalable=yes, initial-scale=2.5, maximum-scale=5.0, minimun-scale=1.0」>

單詞： user-scalable ['skeɪləbl] 用戶可擴展；maximum[ˈmæksɪməm] 最大值的；
width 和height指令分別指定視區的邏輯寬度和高度。他們的值要麼是以像素爲單位的數字，要麼是一個特殊的標記符號。width指令使用device- width標記能夠指示視區寬度應爲設備的屏幕寬度。相似地height指令使用device-height標記指示視區高度爲設備的屏幕高度。

user-scalable指令指定用戶是否能夠縮放視區，即縮放Web頁面的視圖。值爲yes時容許用戶進行縮放，值爲no時不容許縮放。

initial-scale指令用於設置Web頁面的初始縮放比例。默認的初始縮放比例值因智能手機瀏覽器的不一樣而有所差別。一般狀況下設備會在瀏覽器中呈現出整個Web頁面，設爲1.0則將顯示未經縮放的Web文檔。

maximum-scale和minimum-scale指令用於設置用戶對Web頁面縮放比例的限制。值的範圍爲0.25至10.0之間。與initial-scale相同，這些指令的值是應用於視區內容的縮放比例。

全部智能手機瀏覽器都支持ViewPort <meta>標記的width和user-scalabel指令。可是Opera Mobile不使用user-scalable指令，而是主張用戶應始終保留在移動瀏覽器中縮放Web頁面的能力。 

 

原文地址：http://www.cnblogs.com/ubunoon/archive/2012/07/27/2612243.html