第十二章 設計用戶界面 之 設計自適應的UI佈局

1. 概述

　　隨着手機和平板設備的日益普及，使得開發者不得不考慮MVC網站在移動設備上的展現。

　　本章內容包括：運行在多種設備上的程序(屏幕分辨率,CSS,HTML)、設計手機端Web程序。

2. 主要內容

　　2.1 運行在多種設備上的程序(屏幕分辨率,CSS,HTML)

　　　　默認的MVC項目模板支持運行在全景視圖中的桌面瀏覽器。

　　　　能夠使用 @media 查詢來爲不一樣的分辨率開發樣式。

　　　　CSS3容許基於最大屏幕寬度來考慮設計。

/* Landscape phone to portrait tablet up to 768px */ @media (max-width: 767px) { #container { /*layout specific CSS */ 
    } } /* Portrait tablet to landscape and desktop (width between 768 and 980px) */ @media (min-width: 768px) and (max-width: 979px) and (orientation:portrait){ #container { /*layout specific CSS */ 
    } } /* Large desktop */ @media (min-width: 980px) { #container { /*layout specific CSS */ 
    } }

　　　　若是要適配更小的屏幕，應該建立移動端友好的模板頁。

　　　　JQuery移動平臺包提供了一種統一的方式，使用一樣的代碼來管理不一樣的移動平臺。

　　2.2 設計手機端Web程序

　　　　能夠經過修改  Global.asax 文件來 支持多種移動瀏覽器。

namespace MvcApplication { public class MvcApplication : System.Web.HttpApplication { protected void Application_Start() { DisplayModeProvider.Instance.Modes.Insert(0, new DefaultDisplayMode("windows") { ContextCondition = (context => context.GetOverriddenUserAgent().IndexOf ("Windows", StringComparison.OrdinalIgnoreCase) >= 0) }); AreaRegistration.RegisterAllAreas(); WebApiConfig.Register(GlobalConfiguration.Configuration); FilterConfig.RegisterGlobalFilters(GlobalFilters.Filters); RouteConfig.RegisterRoutes(RouteTable.Routes); BundleConfig.RegisterBundles(BundleTable.Bundles); AuthConfig.RegisterAuth(); } } }

3. 總結

　　① ASP.NET MVC4有多種方式來支持移動用戶。能夠給多種設備建立重載視圖，也能夠針對單一設備開發。

　　    System.Web.Mvc.VirtualPathProviderViewEngine.DisplayModeProvider 能夠根據請求判斷來源，從而返回相應的定製好的視圖。

　　② 還有另一種方式來設計移動端可訪問的站點，那就是使用 viewport <meta> 標記 和 CSS @media 查詢。能夠基於屏幕的最大和最小寬度來分組開發樣式。

　　③ JQuery移動庫容許使用標記(markup)來爲客戶端瀏覽器提供額外的功能。若是遇到不支持的瀏覽器，也能夠很好的降級到可替代的方法。