在查看bootstrap教程中,碰到
<meta name="viewport" content="width=device-width, initial-scale=1.0">
后,在群兄弟小胡幫助下,知道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”>
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頁面的能力。
例:
<meta name=”viewport” content=”width=240, height=320, user-scalable=yes, initial-scale=2.5, maximum-scale=5.0, minimun-scale=1.0”>
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頁面的能力。