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

原文链接:http://www.cnblogs.com/stone_lv/p/5057852.html

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

转载于:https://www.cnblogs.com/stone_lv/p/5057852.html

上一篇:360移动端性能监控实践QDAS-APM(iOS篇)


下一篇:Go的包管理工具(一)