第十二章 设计用户界面 之 设计自适应的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(, new
               DefaultDisplayMode("windows")
            {
                ContextCondition = (context => context.GetOverriddenUserAgent().IndexOf
                     ("Windows", StringComparison.OrdinalIgnoreCase) >= )
            });
            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)来为客户端浏览器提供额外的功能。如果遇到不支持的浏览器，也可以很好的降级到可替代的方法。