第十一章 设计用户界面 之 基于浏览器优化程序行为和样式

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- 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动画。