移動支持 – ASP.NET MVC 4 系列

       目前，有各類各樣的方法能夠提升網站應用程序的移動體驗。在某些狀況下，咱們只想在小規格上作一些微小的風格變化；另外一些狀況下，咱們可能徹底改變外觀顯示或者一些視圖的內容；最極端的狀況下，咱們可能從新建立一個專門針對移動用戶的 Web 應用程序。針對這些狀況，MVC 4 提供了以下幾種方案：

• 適應性呈現：默認的 Internet 和 Intranet 應用程序模板使用 CSS 媒體查詢（CSS media queries）來縮小到較小的移動規格（mobile form factors）。
• 顯示模式：MVC 4 採用了基於約定的方法，能夠根據發出請求的瀏覽器選擇不一樣的視圖。與適應性不一樣，顯示模式容許咱們改變發往移動瀏覽器的標記！
• Mobile Project 模板：這個新的項目模板幫助建立只針對移動設備使用的 Web 應用程序。

 

適應性呈現

         

       MVC 4 默認模板在移動瀏覽器中作了不少處理，顯而易見，頁面智能的根據移動設備屏幕尺寸進行縮放，而不是簡單的縮小頁面尺寸（收縮文本和其餘元素），爲了能在移動設備上使用，頁面進行了重繪。頁面利用的是兩個廣泛支持的瀏覽器功能：

       Viewport 元標記：

           基於瀏覽器嗅探或用戶選擇，Viewport 標記只在那些專門爲小規格設計的頁面中使用。這種狀況下，咱們按以下方式使用 Viewport 標記：

       <meta name="viewport" content="width=320" />  // 不適用於大尺寸頁面

           一個更好的解決方案是把咱們的 CSS 擴展到各類規模，而後告訴瀏覽器支持任意設備！這很容易實現：

       <meta name="viewport" content="width=device-width" />

       CSS 媒體查詢的自適應樣式：

           咱們已經告訴瀏覽器頁面足夠智能，能夠自動縮放到當前設備的屏幕尺寸。但如何兌現這一承諾呢？答案是 CSS 媒體查詢。CSS 媒體查詢容許咱們在特定的媒體（顯示）功能指定 CSS 規則，CSS 規則進行自上而下的評估，咱們能夠在 CSS 文件的頂部應用通常的規則，用專門在 CSS 中進行小規格顯示的規則進行重寫，而且媒體查詢環繞這些規則，以使它們不能在大規格顯示的瀏覽器中使用。

 

       列舉一個很是簡單的示例，當寬度大於 850px 的屏幕上顯示時，背景是藍色，不然紅色。CSS 以下：

body {

    background-color: blue;

}

@media only screen and (max-width:850px) {

    body {

        background-color: red;

    }

}

顯示模式

       MVC 4 中的視圖邏輯已經改變，添加了基於約定的替代視圖。當瀏覽器用戶代理顯示是一個已知的移動設備時，默認的視圖引擎首先查找名稱以 .Mobile.cshtml 結尾的視圖。例如，桌面瀏覽器請求主頁時，應用程序使用 Views\Home\Index.cshtml 模板，而當移動瀏覽器請求主頁時，程序就會使用 Views\Home\Index.Mobile.cshtml 模板。這些都由約定來處理，咱們沒必要配置或註冊。

       （這裏不方便測試就不貼圖了，有興趣的朋友能夠下載移動瀏覽器模擬器來啓動項目自行測試）

Mobile Project 模板

       若是須要建立只針對移動瀏覽器使用的應用程序，可使用 Mobile Site 模板來建立新應用程序。該模版爲咱們建立的網站預先配置使用 JQuery Mobile 庫，這個庫爲移動 Web 應用程序提供了大量加強功能：

• 用戶界面採用觸摸優化的 UI 小部件
• 爲主要的移動瀏覽器而設計，並經過了測試
• Ajax 導航提供了動畫頁面過渡，使其在低帶寬的狀況下，依然保持良好的性能
• 經過主題支持，咱們可使用 CSS 主題重置整個網站的皮膚
• 列表視圖使用移動友好的接口，爲瀏覽和操縱信息列表提供了很好的用戶體驗

       Mobile Project 模板能夠開發強大的 JQuery Mobile ASP.NET MVC 應用程序，但這須要深刻了解 JQuery Mobile。能夠參考一些學習資料：

• JQuery Mobile 網站：http://jquerymobile.com，這裏有大量資料，其中包括文檔、演示、主題構建支持
• ASP.NET 網站上的 ASP.NET MVC 4 Mobile Features 教程詳細的介紹瞭如何構建移動會議網站，提供了構建完整應用程序的資源。若是須要，能夠下載運行：http://www.asp.net/mvc/tutorias/mvc-4/aspnet-mvc-4-mobile-features