先上最終效果：
最近做了一個用手機瀏覽器訪問的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的資源