第十一章 设计用户界面 之 基于浏览器优化程序行为和样式
1. 概述
本章内容包括：检测浏览器的特性和功能、创建可以运行于多浏览器以及移动设备的web程序、使用特定扩展(vendor-specific)加强程序行为和样式。
2. 主要内容
2.1 检测浏览器的特性和功能
使用Javascript检测浏览器
<script type="text/javascript">
if ( navigator.userAgent.indexOf("MSIE")>0 )
{
<!--[if lte IE 7]>
<style TYPE="text/css">
@import url(ie7.css);
</style>
<![endif]-->
}
</script>
相对于浏览器类型检测，浏览器特性检测可以更好的排除不支持的方法，在移动客户端方面更加有用。
<script type="text/javascript">
if(window.addEventListener)
{
// Browser supports "addEventListener"
window.addEventListener("load", myFunction, false);
}
else if(window.attachEvent)
{
// Browser supports "attachEvent"
window.attachEvent("onload", myFunction);
}
</script>
目前不是所有的浏览器都支持HTML5，所以如果要使用HTML5标记，一定要有替代方案。
<video>
<source src="video.mp4" type='video/mp4' />
<source src="video.webm" type='video/webm' />
<object type="application/x-silverlight-2">
<param name="source" value="http://url/player.xap">
<param name="initParams" value="m=http://url/video.mp4">
</object>
Download the video <a href="video.mp4">here</a>.
</video>
2.2 创建可以运行于多浏览器以及移动设备的web程序
可以使用 CSS3 media queries 和 HTML <meta name=”viewport”> 标记，再加上特性检测 来确保在各种浏览器上的正确显示。
ASP.NET MVC 4 提供了检测请求的功能，可以检测传入的请求是否来源于移动端。程序可以据此返回相应的视图。
可用的显示视图包含在 System.Web.Mvc.VirtualPathProviderViewEngine.DisplayModeProvider 下。默认包含 mobile 和 default 两个入口。
还可以添加自定义的视图类型，比如添加一个Windows Phone 视图：
DisplayModeProvider.Instance.Modes.Insert(0, new DefaultDisplayMode("iemobile")
{
ContextCondition = (context => context.GetOverriddenUserAgent().IndexOf
("iemobile", StringComparison.OrdinalIgnoreCase) >= 0)
});
如果服务端收到一个“iemobile”请求，系统会首先查找Index.iemobile.cshtml，如果没找到，就回去找Index.Mobile.cshtml。
还可以使用CSS来适配各种需求，通过在 <meta>中添加 viewport属性来适配。
<meta name="viewport" content="width=device-width">
还可以使用CSS的@media 查询功能
/* header */
header .content-wrapper {
padding-top: 20px;
}
/* logo */
.site-title {
color: #c8c8c8;
font-family: Rockwell, Consolas, "Courier New", Courier, monospace;
font-size: 2.3em;
margin: 0;
}
@media only screen and (max-width: 850px) {
/* header mobile */
header .float-left,
header .float-right {
float: none;
}
/* logo mobile */
header .site-title {
margin: 10px;
text-align: center;
}
使用第三方Javascript脚本库，比如 jQuery Mobile, Sencha Touch, and Kendo UI 可以方便的实现浏览器兼容开发。
2.3 使用特定扩展(vendor-specific)加强程序行为和样式
由于种种原因，有一些浏览器会具有个别特有的特性。开发者需要根据面向的用户群来判断需要支持的浏览器。
为了确保CSS特性可以在不同的浏览器上良好的工作，可以使用特定扩展(vendor-specific)。格式如下：
■ ■ - vendor identifier - meaningful name
■ ■ _ vendor identifier - meaningful name
<style>
.corners
{
width: 350px;
margin: 0px;
background-color: #222;
color: #fff;
padding: 8px;
/* regular style */
border-radius: 15px;
/* -moz extension */
-moz-border-radius: 18px;
}
</style>
等到制定的浏览器支持了该属性以后，这个特定扩展就可以去掉了。
3. 总结
① 由于浏览器的多样性，所以各个浏览器及设备上UI显示的一致性就是一个需要好好考虑的问题。使用JQuery或者Modernizr等第三方库，可以提升工作效率。
② HTML5和CSS3的标准化正在进行中，所以各个浏览器的支持还不完善。所以在选择使用一些特性是，要尽量使用最通用的版本。
③ 如果运行目标比较固定，就可以有针对性的开发。而且还可以增加一些客户端上的代码，比如客户端验证和UI动画。
