jQuery Mobile 框架是一個 JavaScript 庫，您可以用它來輕松地創建了一個移動版本的網站，將現有的 Web 頁面轉換成觸摸友好的網站和應用程序。jQuery Mobile 框架允許用戶通過 Web 浏覽器直接連接到觸摸友好的應用程序，這無疑將改變移動應用程序在手機及平板設備上的訪問和分布方式。還有許多其它的移動開發選項，但它們與 jQuery Mobile 正采用的方法的不同之處是，它們的目標是針對各種移動平台。
智能手機和平板設備的采用率不斷暴漲，jQuery Mobile 框架可以幫助開發人員滿足日益增長的移動 Web 體驗需求。提供移動 Web 體驗要求 Web 開發人員和設計人員掌握一套新的技能。 在 2010 年，Nielsen 預計每兩個美國人中就有一個會擁有智能手機，與 2008 年的結果（每 10 個人裡只有一個擁有智能手機）相比，這是一個巨大的增長；並且，在 2011 年 6 月，AMI-Partners 預測 “平板在企業（員工人數介於 1 和 1000 之間）中的采用率到 2015 年將增長 1000%”。由於這些設備采用率的增加，對於能創建移動 Web 體驗的 Web 開發人員和設計人員的需求將會非常強勁。jQuery Mobile 框架對於創建移動 Web 體驗而言是一個優秀的解決方案，因為它增加了移動網站的生成速度，並可支持多種移動平台。
陷阱和解決方案
jQuery Mobile 框架對於創建手機或平板版本的 Web 頁面而言是一個優秀的解決方案，但它完全依賴於對網站的內容附加特定的數據角色屬性。在比較少見的情況下，有可能無法將這些屬性附加到 HTML 標記，並可能要求您創建一個單獨的移動網站。然而，本文將通過一些預見和規劃，向您展示如何結合使用 jQuery Mobile 框架和級聯樣式表版本 3 (CSS3) 的媒體查詢，來創建一個響應式設計，並確定布局如何對用戶的設備作出反應。目的是創建一個單一的網站，可以針對用戶設備的屏幕分辨率顯示適當的布局，從而 動態地響應用戶的設備。
響應式設計是根據用戶設備的屏幕分辨率來響應用戶設備的一種設計。這意味著，無論用戶是在移動、平板還是桌面設備上浏覽 Web 頁面，設計都將根據該設備的屏幕分辨率顯示特定的布局，從而適當地響應設備。雖然 jQuery Mobile 框架提供了一種方法，可快速、輕松地創建移動版本的網站，但它目前沒有（而且很有可能永遠也不會）提供一種固有的方法來根據設備的屏幕分辨率動態響應用戶 的設備。事實上，jQuery Mobile 網站作出聲明，原有的 Media Query Helper Classes 特性 在 beta 中已被棄用，並且已從最新的版本中刪除。實際上，該框架的創建者反而推薦使用 CSS3 媒體查詢。CSS3 媒體查詢和 jQuery Mobile 框架的結合使用，可以實現一個能適應移動、平板和桌面環境的響應式設計。該框架的文檔實際上結合使用了 jQuery Mobile 框架和 CSS3 媒體查詢來實現自己的響應式設計。就對不同屏幕分辨率的反應方式而言，該文檔實際上與您在本文中將會創建的示例相當類似。
憑借對媒體類型的使用，CSS 自版本 2.1 起包括了與設備相關的編碼措施。使用媒體類型的一種常見方式是為桌面計算機屏幕和 Web 頁面的打印版本分別定義單獨的樣式表。CSS3 通過引進媒體查詢，將設備相關的編碼措施這個概念再推進了一步。媒體查詢可以用於確定與 Web 頁面交互的設備類型，並使開發人員能夠確定正在查看 Web 頁面的設備的物理屬性。無需多說，媒體查詢已經成為交付特定於設備的樣式表的一種流行方式，正如您在 清單 1 中所看到的，這些代碼會根據屏幕分辨率交付特定於手機和平板設備的樣式表。
清單 1. 使用媒體查詢交付特定於設備的樣式表
1
<link
2
rel="stylesheet"
3
type="text/css"
4
media="screen and (max-device-width: 799px)"
5
href="mobile-tablet.css" />
本示例中的
media 屬性包含一個被設置為 screen 的媒體類型值，以及一個媒體查詢（在括號中）。這個特定的媒體查詢，檢查用戶當前設備的屏幕分辨率是否小於或等於 799px。如果是，則交付這個手機/平板樣式表；否則，不交付這個樣式表。您可以在單個 Web 頁面中包括多個樣式表鏈接，每一個樣式表鏈接都有自己的媒體查詢，根據您所需要的多種不同的分辨率，有所不同地呈現您的頁面。我注意到，最常見的基於分辨 率的樣式表似乎有三種，一種用於手機和平板設備、一種用於較低分辨率的桌面顯示器，還有一種用於較高分辨率的桌面顯示器。如果您准備使用清單 1 中的代碼，分辨率小於 799px 的所有設備將使用這個樣式表，所以這是一個完美的示例，說明如何可以針對手機和平板設備使用一種樣式表，而台式計算機則使用不同的樣式表。
也可以在單個樣式表的 CSS 內直接使用多個媒體查詢。清單 2 顯示了用於一組導航項的 CSS 類示例，稍後您將在本文中創建它。當設備的屏幕分辨率是 800px 寬或以上時，導航的寬度設置為 300px；當屏幕分辨率為 799px 或以下時，導航的寬度設置為 100%。
清單 2. 使用媒體查詢來交付特定於設備的 CSS
01
@media all and (min-width: 800px) {
02
#nav {
03
width: 300px;
04
}
05
}
06
07
@media all and (max-width: 799px) {
08
#nav {
09
width: 100%;
10
}
11
}
關於媒體查詢還有另一件很酷的事情，那就是如果您在一個現代 Web 浏覽器（包括清單 2 中的 CSS 以及相關的 HTML 元素）中查看一個 Web 頁面，該 Web 頁面實際上也將響應浏覽器的大小。因此，如果浏覽器寬度被設置為 799px 或以下，導航的寬度將是 100%；如果浏覽器的寬度被設置為 800px 或更大，導航的寬度將被設置為 300px。
成為響應式
媒體查詢是一種條件語句，用來確定將什麼 CSS 應用到 Web 頁面。與 jQuery Mobile 框架一起使用，您可以創建一些強大的移動網站，同時保持獨立的桌面布局。jQuery Mobile 框架本身可以用於快速、輕松地創建觸摸友好的網站。該框架有大量組件，可以很容易地添加按鈕、工具欄、對話框、列表視圖等等。然而，當涉及到處理 Web 頁面布局時，CSS 仍然是首選的語言。幸運的是，如本文前面所介紹的，CSS3 已引入媒體查詢，它為開發人員提供根據設備分辨率改變 Web 頁面布局的功能。
結合使用 jQuery Mobile 框架，您可以創建一些響應式布局。出於本文的目的，我用一個簡單的示例，其中包括一組導航項和一個網格。導航項和網格將被根據不同屏幕分辨率安排不同的布 局。在 jQuery Mobile 框架在 Web 頁面中運行之前，您需要做的第一件事是嵌入與 jQuery Mobile 框架關聯的 JavaScript 文件和 CSS（參見 清單 3）。
清單 3. 嵌入 jQuery Mobile 框架
1
<link rel="stylesheet"
2
href="http://code.jquery.com/mobile/1.0b3/jquery.mobile-1.0b3.min.css" />
3
<script src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
4
<script src="http://code.jquery.com/mobile/1.0b3/jquery.mobile-1.0b3.min.js"></script>
jQuery Mobile 框架包括一個
listview 組件，您將使用它顯示您的導航項。要創建一個列表視圖，只需將一個 data-role 屬性添加到其值為 listview 的導航列表 ul 元素中。jQuery Mobile 框架還包括一些有用的工具，允許您創建多列的網格布局。在 清單 4 中，我已經包含了一個兩行三列的網格，這是使用 ui-grid-b、ui-block-a 和 ui-bar 類組合構造的。
jQuery Mobile 的詳細介紹：請點這裡
jQuery Mobile 的下載地址：請點這裡