第十二章 设计用户界面 之 设计自适应的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)来为客户端浏览器提供额外的功能。若是遇到不支持的浏览器，也能够很好的降级到可替代的方法。