1.新增html頁面。
2.聲明html5Document。
3.載入jQuery Mobile Css、jQuery與jQuery Mobile鏈接庫。
4.使用jQuery Mobile定義的html標准、編寫網頁架構及內容。
向網頁中添加jQuery Mobile,添加方法如下：
從CDN引用jQuery Mobile(推薦)
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css"> <script src="http://code.jquery.com/jquery-1.8.3.min.js"></script> <script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
從jQuerymobile.com下載jQuery Mobile庫
從 jQuerymobile.com 下載文件。
<link rel=stylesheet href=jquery.mobile-1.3.2.css> <script src=jquery.js></script> <script src=jquery.mobile-1.3.2.js></script>
- data-role="page" 是顯示在瀏覽器中的頁面
- data-role="header" 創建頁面上方的工具欄（常用於標題和搜索按鈕）
- data-role="content" 定義頁面的內容，比如文本、圖像、表單和按鈕，等等
- data-role="footer" 創建頁面底部的工具欄
在寫移動端的網站的時候， 一定要寫一個meta的name為viewport的屬性， 因為該屬性代表着網站頁面的自適應。簡單的寫法為：<meta name="viewport" content="width=device-width, initial-scale=1">代表着網站為驅動設備的寬度。
- width:控制寬度，可以指定一個寬度值，或輸入device-width，表示寬度隨着設備寬度自動調整
- height:控制高度，或輸入device-height。
- initial-scale:初始縮放比例，最小為0.25，最大為0.5。
- minimum-scale:允許用戶縮放的最小比例，最小為0.25，最大為0.5。
- maximum-scale:允許用戶縮放的最大比例，最小為0.25，最大為0.5。
- user-scalable:是否允許用戶手動縮放，可以輸入0或者1，也可以是輸入yes或no。
代碼示例：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"><!--自適應頁面--> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css"> <script src="http://code.jquery.com/jquery-1.8.3.min.js"></script> <script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script> </head> <body> <div data-role="page" > <div data-role="header"> <h1>我的網站</h1> </div> <div data-role="content"> <p>這是正文部分</p> <ul data-role="listview"> <li data-role="list-divider">我的目標</li> <li><a href="http://www.baidu.com">精彩內容即將呈現</a></li> <li><a href="http://www.baidu.com">百度一下，就知道</a></li> <li><a href="http://www.baidu.com">堅持才能成功</a></li> </ul> </div> <div data-role="footer"> <h1>這個是頁腳文本</h1> </div> </div> </body> </html>
結果頁面：
