開發者必讀jQuery Mobile入門教程

你天天都會對着它講話，和它玩遊戲，用它看新聞——沒錯，它就是你褲兜裏的智能手機。android，黑莓仍是iphone?爲了讓你清楚意識到究竟哪些纔算是智能手機，我在下面總結了一個智能手機系統/設備的列表：

　　· Apple iPhone/iPod Touch

　　· Google Android

　　· RIM BlackBerry/Playbook OS

　　· Nokia Symbian (我認可它該退休了，但是在世界範圍內它仍然擁有10億以上的用戶)

　　· HP/Palm WebOS

　　· Microsoft Window Phone 7

　 　沒錯，這使人眼花繚亂的衆多智能手機系統對HTML標準支離破碎的支持，直接致使了處理這些系統瀏覽器的兼容性成爲了你最大的挑戰。舉例來講，蘋果的 iphone對HTML5標準有着很好的支持，然而Symbian和Microsoft Phone系列卻幾乎不支持HTML5的任何特性(譯註：準確的說，是windows mobile系列，目前的windows phone 7對HTML5支持很好)。jQuery社區爲了在解決兼容性和高效建立移動web站點作了大量努力，並開發了jQueryMobile這個移動框架。而 本文旨在爲讀者介紹仍在alpha版本階段的jQueryMobile框架(譯註：目前jQueryMobile已經爲beta2版本)的開發基礎知識和 技巧。

　　用jQueryMobile來開發網站

　　Gartner study(link)的數據代表在將來將會有愈來愈多的用戶經過手機或者平板電腦訪問你的網站，到2013年，將會有18億的移動設備用戶，對你的 web設計團隊來講開發移動站點已經不能再僅僅是「計劃」而已了，你必須將你的移動站點迅速變爲「現實」才行。

　　在美國，IOS和 Android設備佔了很大比重，而美國之外的地方主要是Nokia的設備佔統治地位。jQueryMobile爲了在儘量多的設備上運行，承諾將支持 絕大部分移動設備/系統。在早些時候(2010年9月)，jQuery的做者John Resig透露了一張jQueryMobile對各類設備/系統的支持表格(見下)。對於每一個系統來講，jQueryMobile將他們的支持狀況分爲 A(好)，B(通常)，C(基本)三個等級。

　　因爲移動設備市場的變幻莫測，這張圖表也會迅速變化(一個很好的例子就是目前Nokia正在與Microsoft合做生產基於Windows Phone 7的設備——而在jQueryMobile中WP7的支持等級爲A)。

　　jQueryMobile始終貫徹漸進加強的設計觀念來知足你的開發須要。jQuerymobile的核心能使得基本的HTML標籤在全部的瀏覽器中生效，在此基礎之上，再對網頁的行爲和效果進行加強，這意味着你的網頁在等級較高的瀏覽器中能得到很是優秀的體驗，而在較差的瀏覽器也能正常的使用。

　 　繁雜的移動瀏覽器們帶來了巨大的挑戰。一方面某些瀏覽器(例如Android的原生瀏覽器，Safari移動版等)都基於WebKit的一個變種版本 (WebKit是一個web渲染引擎，Google Chrome桌面版，Apple的Safari都採用了該引擎。WebKit並不知道當前運行的網絡的好壞，操做系統是什麼甚至屏幕滾動到了哪裏，爲了讓WebKit知道這些狀況，操做系統/ 瀏覽器/設備廠商都須要基於WebKit來構建本身的瀏覽器程序)，並帶有豐富的特性。另外一方面Nokia的Symbian和Windows Mobile 6(及更早的版本)這些胡亂支持標準的設備又佔有至關大的市場。雪上加霜的是，WebKit在不一樣移動設備中還有不一樣的版本。因此漸進加強的基本目標就是 你的內容可以在任何的設備中都可以正常「顯示」。

　　jQueryMobile使用入門：

　　使用jQueryMobile的第一步，先建立一個html頁面，並在head標籤中加入如下內容：

< link rel = " stylesheet " href = " http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.css " > < script src = " http://code.jquery.com/jquery-1.5.min.js " ></ script > < script src = " http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js " ></ script >

　　正如你在代碼中看到的，jQueryMobile是jQuery的一個擴展。目前來講，壓縮後的jQuerymobile僅12Kb。

　　上面的代碼均來自jQuery的CDN服務器，css文件中也包含必需的圖片連接，若是你須要在你本身的服務器上運行，能夠下載下面的文件解壓縮後部署到你的服務器上：

　　Zip File: jquery.mobile-1.0b2.zip

　　在建立第一個jQueryMobile頁面時你須要建立三塊基本內容，下面的推薦模版展現了這一過程，你能夠在將來的項目中使用它：

< meta name = " viewport " content = " width=device-width, minimum-scale=1, maximum-scale=1 " > < link rel = " stylesheet " href = " http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.css " > < script src = " http://code.jquery.com/jquery-1.5.min.js " ></ script > < script src = " http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js " ></ script > < div data - role = " page " > < div data - role = " header " > < h1 > Page Title </ h1 ></ div >< ! -- / header --> < div data - role = " content " > < p > Page content goes here. </ p ></ div >< ! -- / content --> < div data - role = " footer " > < h4 > Page Footer </ h4 ></ div >< ! -- / header --></ div >< ! -- / page -->

　 　在模版中有些地方值得咱們注意。首先是DIV元素的使用，咱們知道，既然HTML5在移動設備中如此流行，爲何不使用更加新的HEADER, ARTICLE, SECTION, FOOTER元素呢?這是由於較老的智能手機瀏覽器沒法明白新的HTML5元素。在某些狀況下，例如windows phone上老版本的IE會出現一個bug使得沒法加載頁面的css。而DIV元素卻被普遍支持。

  

　　此時你已經能夠保存你的網頁並在瀏覽器中查看了，這些代碼一樣能夠在桌面瀏覽器中正常工做。我推薦你使用Chrome來進行本地測試。要在真實環境測試，你就須要相應移動設備了。

　　教你使用超連接

　　普通網頁和移動網頁的一個巨大的不一樣即是屏幕中呈現內容的數量多寡上。雖然你能夠在你的iPhone上加載紐約時報的主頁，但你須要縮放它才能順利閱讀上面的內容。這樣的體驗並很差，而更好的解決方案是減小那些雜亂的內容，只在屏幕上顯示你須要顯示的內容。

　　若是是傳統的網站，你可能會建立一些包含少許內容的子頁面，而當你使用jQueryMobile時，你最好在頁面中包含「微量」的內容，這樣纔會更有效率。

　　在上面例子中你已經看到了如何利用模版來建立一個頁面。如今讓咱們更進一步，來建立內容的「page」。jQueryMobile中的一個「page」結構通常使用一個DIV來組織。如今你可使用上面的模板來建立一個包含四個跳轉到其餘頁面的連接的導航頁面：

< ! -- Start of first page --> < div data - role = " page " id = " menu " >    < div data - role = " header " >        < h1 > Menu </ h1 >    </ div >< ! -- / header -->    < div data - role = " content " >           < p > What vehicles do you like? </ p >               < p >< a href = " #Cars " > Cars </ a ></ p >        < p >< a href = " #Trains " > Trains </ a ></ p >        < p >< a href = " #Planes " > Planes </ a ></ p >           </ div >< ! -- / content -->    < div data - role = " footer " >        < h4 > Page Footer </ h4 >    </ div >< ! -- / footer --> </ div >< ! -- / page -->

　　上面這段代碼中第一個div很是重要，它包含有一個id和一個data-role屬性：

　　data-role="page" id="menu"

　 　data-role定義了這個div是一個「page」，page這個術語稍微有點讓人誤解，「page」這裏其實指的是一個可視面或者在屏幕裏未隱藏 的HTML代碼部分，而不是指的一個單獨的頁面(或者說單獨的HTML文件)。data-role="page" 意味着jQueryMobile會根據div元素在屏幕中構建可視內容。而id屬性容許你經過a標籤連接到該page，或者其餘page。

　　上面建立的導航頁是咱們在瀏覽器看到的第一個頁面，接下來咱們再添加三個「page」，他們有不一樣的id：Cars， Planes，Trains。

< div data - role = " page " id = " Cars " >    < div data - role = " header " >        < h1 > Cars </ h1 >    </ div >< ! -- / header -->    < div data - role = " content " >           < p > We can add a list of cars </ p >    </ div >< ! -- / content -->    < div data - role = " footer " >        < h4 > Page Footer </ h4 >    </ div >< ! -- / footer --> </ div >< ! -- / page --> < ! -- Start of third page --> < div data - role = " page " id = " Trains " >    < div data - role = " header " >        < h1 > Trains </ h1 >    </ div >< ! -- / header -->    < div data - role = " content " >           < p > We can add a list of trains </ p >    </ div >< ! -- / content -->    < div data - role = " footer " >        < h4 > Page Footer </ h4 >    </ div >< ! -- / footer --> </ div >< ! -- / page --> < ! -- Start of fourth page --> < div data - role = " page " id = " Planes " >    < div data - role = " header " >        < h1 > Planes </ h1 > </ div >< ! -- / header -->    < div data - role = " content " >           < p > We can add a list of planes </ p >    </ div >< ! -- / content -->    < div data - role = " footer " >    < h4 > Page Footer </ h4 > </ div >< ! -- / footer --> </ div >< ! -- / page -->

　　如今，在你的Android或者IOS設備裏測試一下，當你加載好頁面後你會發現這三件事情：

　　· 導航頁出如今屏幕中(你能夠上下滾動一下，並無別的東西出現)

　　· 當你點擊一個連接時，會動畫切換到另外一個頁面。

　　· 新頁面的頂部會自動出現一個「back」按鈕(譯註：jQueryMobile目前版本默認已經取消了這一功能)

　　其實這些div元素預先會加載並緩存到你的瀏覽器中，所以「頁面」間的切換會很是流暢。

　 　在同一個HTML頁面建立多個在屏幕上顯示的「頁面」使得你能夠大大減小頁面加載的次數，但同時也會致使許多移動設備運行緩慢。 jQueryMobile將頁面全部的連接跳轉都視做Ajax調用，這樣能夠充分利用CSS的過渡效果，當你想要連接到你本身的web程序以外的某些連接 時，你能夠這樣編寫你的連接代碼：

< a href = " http://www.madinc.co " rel = " external " > madinc.co </ a >

　 　如上所示，僅須要爲a標籤添加 rel="external"屬性便可。然而jQueryMobile對於(同域的)外部連接並非簡單地跳轉完事兒，相比於其餘移動框架它更進了一步， 由於他對(同域的)全部連接都採用Ajax調用方式，從而實現漂亮的轉場效果。基於此你能夠將你的網頁內容分離到許多頁面來建立更大型的項目。

　　使用組件

　 　連接和頁面只是移動網頁設計中一個很小的部分，APP程序(好比採用Object-C，C#，java等在Android或者IOS設備上建立的本地應 用程序)快速增加的同時產生了豐富的控件和組件(例如菜單欄，列表等控件)使得開發者能夠很方便地建立複雜的應用程序，這正是許多移動網頁開發者第二個巨 大的挑戰——由於在原生的HTML裏面並無這些控件或者組件。

　　針對這一問題，jQueryMobile當前正在建立一組很是有用的組件。如下是在alpha版本中已經發布的組件：

　　· Pages(頁面)

　　· Dialog boxes(對話框)

　　· Toolbars(工具欄)

　　· Buttons(按鈕)

　　· Content formatting(內容格式化)

　　· Form elements(表單)

　　· List views(列表)

　　只要你懂的一點點的HTML，你會發現添加這些組件並不困難，接下來咱們看幾個例子。

　　爲頁面添加header和footer

　 　上面的模版已經爲你展現瞭如何輕鬆地建立工具欄(header，footer)。咱們知道，在不一樣尺寸的屏幕上建立自適應工具欄一般都是很是難的活兒。 而如今，jQueryMobile讓你可以很是容易地建立一個帶有一個居中標題和兩個按鈕而且自適應任何屏幕尺寸的header：

< div data - role = " header " data - position = " inline " >    < a href = " cancel.html " data - icon = " delete " > Cancel </ a >    < h1 > Edit Contact </ h1 >    < a href = " save.html " data - icon = " check " > Save </ a > </ div >

　　代碼中a標籤的順序決定了按鈕顯示的位置。以上代碼在幾乎全部的設備中都能取得一致的顯示效果。

　　header和footer一樣能夠被自定義爲你想要的樣式，好比改造一個導航條：你能夠添加一些按鈕在footer裏面，從而導航到某一頁面的不一樣部分：

< pre class = " brush:html;gutter:false; " > < div data - role = " navbar " >    < ul >        < li >< a href = " #nav1 " class = " ui-btn-active " > One </ a ></ li >        < li >< a href = " #nav2 " > Two </ a ></ li >    </ ul > </ div >< ! -- / navbar -->

　　從這些代碼你能夠發現jQueryMobile不過是一些簡單的HTML代碼，導航條依然是div，而諸如ui-btn-active這個class可使得你的按鈕顯示爲被選擇狀態。

　　當你點擊一個按鈕並導航到該頁面的另外一個部分時，jQueryMobile會自動加上一個back按鈕，如下的代碼結構能夠清晰地展示這一過程：

< div data - role = " page " >    < div data - role = " header " >        < h1 > Navigation </ h1 >    </ div >< ! -- / header --> < div data - role = " content " >    Navigation page   </ div >< ! -- / content -->    < div data - role = " footer " >    < div data - role = " navbar " >        < ul >          < li >< a href = " #nav1 " class = " ui-btn-active " > One </ a ></ li >          < li >< a href = " #nav2 " > Two </ a ></ li >        </ ul >    </ div >< ! -- / navbar --> </ div >< ! -- / footer --> </ div >< ! -- / page --> < div data - role = " page " id = " nav1 " >    < div data - role = " header " >        < h1 > Nav Screen 1 </ h1 >    </ div >< ! -- / header -->    < div data - role = " content " >    Screen for Navigation One   </ div >< ! -- / content -->    < div data - role = " footer " > < h4 > Additional Footer information </ h4 >    </ div >< ! -- / footer --> </ div >< ! -- / page --> < div data - role = " page " id = " nav2 " >    < div data - role = " header " >        < h1 > Nav Screen 2 </ h1 >    </ div >< ! -- / header -->    < div data - role = " content " >    Screen for Navigation Two    </ div >< ! -- / content --> < div data - role = " footer " > < h4 > Additional Footer information </ h4 > </ div >< ! -- / footer --> </ div >< ! -- / page -->

　　建立位置固定的header和footer

　　工具條固定在屏幕上方或者下方是一個很常見的界面設計，你能夠爲footer或者header添加 data-position="fixed"來實現這一點。如下代碼會強制footer/header固定在下方/上方：

   < div data - role = " header " data - position = " fixed " >        < h1 > Navigation </ h1 >    </ div >< ! -- / header -->    < div data - role = " content " >        < ul data - role = " listview " data - dividertheme = " d " style = " margin-top: 0; " >          < li data - role = " list-divider " > Royal Family </ li >          < li >< a href = " #nav1 " > Henry VIII </ a ></ li >          < li >< a href = " #nav1 " > George V </ a ></ li >          < li >< a href = " #nav1 " > Prince of Wales </ a ></ li >          < li >< a href = " #nav1 " > Elizabeth I </ a ></ li >          < li >< a href = " #nav1 " > Elizabeth II </ a ></ li >          < li data - role = " list-divider " > Prime Miniseters </ li >          < li >< a href = " #nav2 " > Winston Churchill </ a ></ li >          < li >< a href = " #nav2 " > Tony Blare </ a ></ li >          < li >< a href = " #nav2 " > David Cameron </ a ></ li >        </ ul >    </ div >< ! -- / content --> < div data - role = " footer " data - position = " fixed " >    < div data - role = " navbar " >        < ul >          < li >< a href = " #nav1 " class = " ui-btn-active " > Royals </ a ></ li >          < li >< a href = " #nav2 " > Leaders </ a ></ li >        </ ul >    </ div >< ! -- / navbar --> </ div >< ! -- / footer --> </ div >< ! -- / page --> < div data - role = " page " id = " nav1 " data - position = " fixed " >    < div data - role = " header " >        < h1 > Royal Family </ h1 >    </ div >< ! -- / header --> < div data - role = " content " > < p > Members and relatives of the British Royal Family historically represented the monarch in various places throughout the British Empire, sometimes for extended periods as viceroys, or for specific ceremonies or events. Today, they often perform ceremonial and social duties throughout the United Kingdom and abroad on behalf of the UK, but, aside from the monarch, have no constitutional role in the affairs of government. This is the same for the other realms of the Commonwealth though the family there acts on behalf of, is funded by, and represents the sovereign of that particular state, and not the United Kingdom. </ P > </ div >< ! -- / content -->    < div data - role = " footer " data - position = " fixed " >        < h4 > Royal Family </ h4 >    </ div >< ! -- / header --> </ div >< ! -- / page --> < div data - role = " page " id = " nav2 " data - position = " fixed " >    < div data - role = " header " >        < h1 > Prime Ministers </ h1 >    </ div >< ! -- / header --> < div data - role = " content " > The Prime Minister of the United Kingdom of Great Britain and Northern Ireland is the Head of Her Majesty ' s Government in the United Kingdom. The Prime Minister and Cabinet (consisting of all the most senior ministers, who are government department heads) are collectively accountable for their policies and actions to the Sovereign, to Parliament, to their political party and ultimately to the electorate. The current Prime Minister, David Cameron, was appointed on 11 May 2010.</div><!-- /content --> < div data - role = " footer " data - position = " fixed " >    < h4 > Prime Minister </ h4 >        </ div >< ! -- / header -->    </ div >< ! -- / page -->

　　看，如今不使用Objective-C ，你也能夠建立一個易用的界面，是否是很不錯?

　　對話框

　　使用data-rel屬性能夠方便地建立彈出式對話框，如下代碼將會以對話框形式加載dialog.html頁面：

　　a href="dialog.html" data-rel="dialog">Open dialog

　　因爲對話框在jQueryMobile裏面其實和其餘page沒有任何區別，所以你能夠在對話框裏添加任何類型的HTML代碼，固然你也能夠在同一個html文件裏建立兩個page，一個是主界面：

< div data - role = " page " >    < div data - role = " header " >        < h1 > Dialog Box </ h1 >    </ div >< ! -- / header --> < div data - role = " content " >       < a href = " #dialogPopUp " data - rel = " dialog " data - role = " button " > Open dialog </ a > </ div >< ! -- / content --> < div data - role = " footer " >    < h4 > Page Footer </ h4 > </ div >< ! -- / footer --> </ div >< ! -- / page -->

　　另外一個是對話框(上面的HREF屬性便指向這個對話框page)：

< div data - role = " page " id = " dialogPopUp " >    < div data - role = " header " >        < h1 > Dialog Title </ h1 >    </ div >< ! -- / header -->    < div data - role = " content " >          This is a dialog box          </ div >< ! -- / content --> < div data - role = " footer " > < h4 > Additional Footer information </ h4 > </ div >< ! -- / footer --> </ div >< ! -- / page -->

　　要注意以上代碼中footer是可選的，可是你必須包括header，由於若是沒有header，將沒法顯示自動生成的對話框關閉按鈕。

　　列表

　　當你有大量的數據條目須要顯示時，列表是一個不錯的選擇。下面是使用ul時的HTML代碼：

< ul >    < li >< a href = " #nav1 " > Henry VIII </ a ></ li >    < li >< a href = " #nav1 " > George V </ a ></ li >    < li >< a href = " #nav1 " > Prince of Wales </ a ></ li >    < li >< a href = " #nav1 " > Elizabeth I </ a ></ li >    < li >< a href = " #nav1 " > Elizabeth II </ a ></ li > </ ul >

　　在jQueryMobile你能夠經過data-role="listview"來將一個普通的列表轉換成一個很是華麗如同本地APP通常的列表樣式：

< ul data - role = " listview " >    < li >< a href = " #nav1 " > Henry VIII </ a ></ li >    < li >< a href = " #nav1 " > George V </ a ></ li >    < li >< a href = " #nav1 " > Prince of Wales </ a ></ li >    < li >< a href = " #nav1 " > Elizabeth I </ a ></ li >    < li >< a href = " #nav1 " > Elizabeth II </ a ></ li > </ ul >

 

　　就是這樣，僅須要20個字母，你就搞定了這一切。

　　除此以外，jQueryMobile還爲列表提供了一些加強的選項，如下代碼將爲列表添加分隔符(divider):

< ul data - role = " listview " data - dividertheme = " d " >    < li data - role = " list-divider " > Royal Family </ li >    < li >< a href = " #home " > Henry VIII </ a ></ li >    < li >< a href = " #home " > George V </ a ></ li >    < li >< a href = " #home " > Prince of Wales </ a ></ li >    < li >< a href = " #home " > Elizabeth I </ a ></ li >    < li >< a href = " #home " > Elizabeth II </ a ></ li >    < li data - role = " list-divider " > Prime Ministers </ li >    < li >< a href = " #home " > Winston Churchill </ a ></ li >    < li >< a href = " #home " > Tony Blare </ a ></ li >    < li >< a href = " #home " > David Cameron </ a ></ li > </ ul >

 

　　如上面的代碼所示，爲li元素添加data-role="list-divider"便可實現分隔符的效果。

　　你還能夠爲列表添加小氣泡來展現一些附加數據(本例展現了英國皇室的統治時間)：

< ul data - role = " listview " style = " margin-top: 0; " >    < li >< a href = " #nav1 " > Henry VIII < span class = " ui-li-count " > Reign 37 Years </ span ></ a ></ li >    < li >< a href = " #nav1 " > George V < span class = " ui-li-count " > Reign 25 Years </ span ></ a ></ li >    < li >< a href = " #nav1 " > Prince of Wales < span class = " ui-li-count " > N / A </ span ></ a ></ li > < li >< a href = " #nav1 " > Elizabeth I < span class = " ui-li-count " > Reign 44 Years </ span ></ a ></ li >    < li >< a href = " #nav1 " > Elizabeth II < span class = " ui-li-count " > Reign since 1952 </ span ></ a ></ li > </ ul >

 

　　下面是一個更加複雜的例子，列表中包含了連接，圖片，文本：

< ul data - role = " listview " style = " margin-top: 0; " >    < li >        < img src = " http://img.freebase.com/api/trans/image_thumb/en/henry_viii_of_england?pad=1&errorid=%2Ffreebase%2Fno_image_png&maxheight=64&mode=fillcropmid&maxwidth=64 " />        < h3 >< a href = " index.html " > Henry VIII </ a ></ h3 >        < p > Reign 37 Years </ p >        < a href = " #home " > Details </ a >    </ li >    < li >        < img src = " http://www.iwise.com/authorIcons/15/King_George%20V_64x64.png " />        < h3 >< a href = " index.html " > George V </ a ></ h3 > < p > Reign 25 Years </ p >        < a href = " #home " > Details </ a >    </ li >    < li >        < img src = " http://img.freebase.com/api/trans/image_thumb/en/prince_of_wales_secondary_school?pad=1&errorid=%2Ffreebase%2Fno_image_png&maxheight=64&mode=fillcropmid&maxwidth=64 " />        < h3 >< a href = " index.html " > Prince of Wales </ a ></ h3 >        < p > Reign N / A </ p >        < a href = " #home " > Details </ a >    </ li >    < li >    < img src = " http://www.iwise.com/authorIcons/13846/Elizabeth%20I%20of%20England_64x64.png " />        < h3 >< a href = " index.html " > Elizabeth I </ a ></ h3 >        < p > Reign 44 Years </ p >        < a href = " #home " > Details </ a >    </ li >    < li >        < img src = " http://www.iwise.com/authorIcons/9098/Elizabeth%20II_64x64.png " />        < h3 >< a href = " index.html " > Elizabeth II </ a ></ h3 >        < p > Reign Since 1952 </ p >        < a href = " #home " > Details </ a >    </ li > </ ul >

　　在你須要展示富文本時這種列表尤其有用，好比顯示一個包含照片，名字，平均分等信息的學生名單。

　　部署你的jQueryMobile站點

　　當你完成了開發，最後一步固然是讓全世界都看到你的工做成果啦~

　　到現目前爲止，jQueryMobile都只是包含了一些HTML，CSS，javascript文件罷了，部署方式與通常的HTML站點無異。用FTP(或者其餘你喜歡的方式)上傳到你的web服務器就能夠了，固然，你要確保你上傳了全部用到的文件。

　　此時已經大功告成，你就能夠用你的移動設備訪問站點啦!

　　使用jQueryMobile的目標羣是移動設備用戶，所以你能夠考慮爲你的網站建立兩個版本，一個爲桌面用戶準備，另外一個則爲移動用戶(準備好比主站爲www.xxxx.com，移動站位m.xxxx.com)。

　　接下來呢?

　　jQueryMobile當前版本已經作了很是多的工做，若是你想進入移動開發領域那麼如今已經無需再等待了，jQueryMobile讓一切都來得那麼簡單。