第十二章 设计用户界面 之 设计自适应的UI布局

1. 概述

　　随着手机和平板设备的日益普及，使得开发者不得不考虑MVC网站在移动设备上的展示。

　　本章内容包括：运行在多种设备上的程序(屏幕分辨率,CSS,HTML)、设计手机端Web程序。

2. 主要内容

　　2.1 运行在多种设备上的程序(屏幕分辨率,CSS,HTML)

　　　　默认的MVC项目模板支持运行在全景视图中的桌面浏览器。

　　　　可以使用 @media 查询来为不同的分辨率开发样式。

　　　　CSS3允许基于最大屏幕宽度来考虑设计。

/* Landscape phone to portrait tablet up to 768px */ 
@media (max- 767px) { 
    #container {  
                /*layout specific CSS */ 
    } 
} 
 
/* Portrait tablet to landscape and desktop (width between 768 and 980px) */ 
@media (min- 768px) and (max- 979px) and (orientation:portrait){ 
    #container { 
                /*layout specific CSS */ 
    } 
} 
 
/* Large desktop */ 
@media (min- 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)来为客户端浏览器提供额外的功能。如果遇到不支持的浏览器，也可以很好的降级到可替代的方法。