?在移動app開發中會經常使用到viewport指令, ?ViewPort?<meta>標記用于指定用戶是否可以縮放Web頁面,如果可以,那么縮放到的最大和最小縮放比例是什么。ViewPort?<meta>標記的content值是由指令及其值組成的以逗號分隔的列表。
~~~
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1">
~~~
1?width和height指令分別指定視區的邏輯寬度和高度。可以使用一個以像素為單位的數字,也可以使用一個特殊的標記符號。
width指令使用device-width標記可以指示視區寬度應為設備的屏幕寬度,height指令使用device-height標記指示視區高度為設備的屏幕高度。
2?initial-scale指令用于設置Web頁面的初始縮放比例。默認的初始縮放比例值因智能手機瀏覽器的不同而有所差異。通常情況下設備會在瀏覽器中呈現出整個Web頁面,設為1.0則將顯示未經縮放的Web文檔。
3maximum-scale和minimum-scale指令用于設置用戶對Web頁面縮放比例的限制。值的范圍為0.25至10.0之間。與initial-scale相同,這些指令的值是應用于視區內容的縮放比例。
4user-scalable指令指定用戶是否可以縮放視區,即縮放Web頁面的視圖。值為yes時允許用戶進行縮放,值為no時不允許縮放。
[參考](http://www.quirksmode.org/mobile/viewports2.html)
[參考](http://www.quirksmode.org/mobile/viewports.html)
- 前言
- 使用jqMobi開發app基礎
- jqMobi開發app頁面注意事項
- 使用jqMobi開發app基礎:定義header
- 使用jqMobi開發app基礎:定義footer
- 使用jqMobi開發app基礎:通過panel添加內容
- 使用jqMobi開發app基礎:panel屬性data-defer介紹
- 使用jqMobi開發app基礎:Side Menu
- 使用jqMobi開發app基礎:Styled Lists布局
- 使用jqMobi開發app基礎:Grid布局
- 使用jqMobi開發app基礎:響應式布局介紹
- 使用jqMobi開發app基礎:Toggle Switches開關按鈕
- 使用jqMobi開發app基礎:HTML5 LocalStorage 本地存儲
- 使用jqMobi開發app基礎:登錄頁面的實現
- 使用jqMobi開發app基礎:注銷頁面的實現
- 使用jqMobi開發app基礎:viewport指令
- 使用jqMobi開發app基礎:a標簽的使用
- 使用jqMobi開發app基礎:Scrolling的使用,向上向下拖動,動態添加數據
- 使用jqMobi開發app基礎:頁面傳值方式
- 使用jqMobi開發app基礎:panel之間的跳轉方式
- 使用jqMobi開發app基礎:panel之間的跳轉方式總結
- 使用jqMobi開發app基礎:下拉select
- 使用jqMobi開發app基礎:真的只能存在一個DOM嗎?
- 使用jqMobi開發app基礎:使用 jQuery
- 使用jqMobi開發app基礎:Scrolling的使用,拖動后大量空白的解決方法
- 使用jqMobi開發app基礎:Scrolling的使用,停止和繼續拖動有關的問題
- 使用jqMobi開發app基礎:Badge的使用
- 使用jqMobi開發app基礎:如何撥打電話?
- 使用jqMobi開發app基礎:彈出內容的設計