天天看點

html meta中的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頁面的能力。

繼續閱讀