先上最終效果：

最近做了一個用手機瀏覽器訪問的web應用，采用較流行的HTML5，為了提高開發效率節省時間決定采用現有開源框架，免去了自己做設計與兼容性。

一些比較優秀的框架：10大優秀的移動Web應用程序開發框架推薦

?

?最終選擇的是 jQuery Mobile ，官方地址：http://jquerymobile.com

jQuery Mobile 是針對觸屏智能手機與平板電腦的網頁開發框架。能工作在現有主流的智能手機和平板電腦上，且構建于 jQuery 以及 jQuery UI類庫之上，用極少的 HTML5、CSS3、JavaScript 和 AJAX 腳本代碼就能完成頁面的布局渲染。

jQuery Mobile提供大量的實用 Demo實例?從而減少學習成本，容易上手。對于中文版的文檔可在? w3cschool的 jQuery Mobile 教程?中查詢幫助。

本人用的是 jQuery Mobile 1.3.2 冒似要用jquery-1.8.2.min.js才能正常運行，官網 下載?jQuery Mobile 包，然后按照指引的方法引用css與js，不要忘記引用jquery包。

注意，為了讓網頁的寬度自動適應手機屏幕的寬度在head標簽內加上以下內容：

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />width=device-width ：表示寬度是設備屏幕的寬度initial-scale=1.0：表示初始的縮放比例minimum-scale=1.0：表示最小的縮放比例maximum-scale=1.0：表示最大的縮放比例user-scalable=yes：表示用戶是否可以調整縮放比例

由于jQuery Mobile屬于前端UI，因此要從后臺動態取數據得用異步來取，一種是可以結合WCF或webservice，無需本地搭建后臺，還一種是用***Handler.ashx，返回json或XML數據。

對于listview控件，動態綁定后要刷新動作才能顯示，listview.listview("refresh");

各組件刷新方法：

復選框:

$("input[type='checkbox']").prop("checked",true).checkboxradio("refresh");

單選框:

$("input[type='radio']").prop("checked",true).checkboxradio("refresh");

下拉菜單:

var myselect = $("#selectfoo");myselect[0].selectedIndex = 3;myselect.selectmenu("refresh");

Sliders:

$("input[type='range']").val(60).slider("refresh");

開關:

?$("#selectbar");myswitch[0].selectedIndex = 1;myswitch.slider("refresh");

?對于有些組件可能不能滿足個性化要求，如日期控件在手機端的選擇，可以選擇配套的插件來完成：分享15款為jQuery Mobile定制的插件

?注意jQuery Mobile對page的定義，一個頁面有多個page標簽下，不同標簽間的切換，頁面加載時只加載指定page下的內容包括js，如果需要加載的Js未包括在內如寫在了head標簽內，則不會加載，導致頁面切換后達不到想要的效果。

?

特殊問題解決方法：

data-tap-toggle="false" header和footer在頁面滾動的時候也不消失

data-position="fixed"之后的效果是：頁面滾動的時候header和footer消失

jQuery Mobile在 CSDN的資源?

JQM常見出錯問題解決辦法匯總

?

?

總結

以上是生活随笔為你收集整理的jquery.mobile手机网页简要的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。