1.如何选择要使用的特性以及所面向的浏览器
2.哪些浏览器支持HTML5
3.如何检测是否支持HTML5
4.如何开发贷容错性的Web应用程序
5.CSS3媒体查询如何增强检测脚本
 
使用HTML5这类前沿预言时,可能会选择以下两种方案
一. 尽可能地靠拢新标准,忽略那些不支持的平台
二.不使用任何新技术,知道改标准被浏览器系统广泛支持。
现在我们要使用的是第三种方法:就是对新技术理智的取舍,并慎重处理兼容性问题,这样就能开发出对大多数用户都可靠且实用的Web应用程序。
 
有4种检测HTML5功能的基本方法:
一.在全局对象上检测属性
二.在创建的元素上检测属性
三.检测一个放法(Methed)能否得到正确的返回值
四.检测能否保留元素值
 
利用全局元素检测属性
所有HTML5文档都显示在一个全局元素中,通常将它称为navigator或window.
可以直接在这些全局属性上创建一些HTML5属性。在这种情况下,浏览器可以直接使用它们。
如下:
if (window.applicationCache) {
    document.write("yes,your borwser can use offline web application");
} else {
    document.write("No,your borwser cannot use offline web application");
}
如果浏览器支持离线Web,那你就可以正常使用它了,否则。。。。
 
利用创建的元素检测属性 
并非真正创建元素,你只是在浏览器内存中创建一个虚拟元素。它可以帮你完成检测,而并不会在浏览器中显示出来。
这也是必须进行的检测,因为可在DOM中加入任何元素,但当添加的元素无法被浏览器识别时,浏览器会为其添加标准全局属性,并且实质上会将其忽略。若改元素可被浏览器识别,浏览器才会为它添加专有属性。
例如:
if (document.createElement('canvas').getContext) {
    document.write('Yse,your borwser can use the canvas');
} else {
    document.write("No,your borwser cannot use the canvas");
}
 
检测方法能否返回正确的值
如下:
return !!document.createElement('video').canPlayType;
如果支持,接下来再检测H.264编解析器
!!video.canPlayType('video/mp4; codecs="avc1.42E01E, mp4a.40.2"')
 
写全为下:
function videoCheck() {
    retrun !!document.createElement('video').canPlayType;
}
function h264Check() {
   if ( !videoCheck ) {
         document.witet("not");
         return;
    }
    var video = document.createElement("video");
    if ( !video.canPlayType('video/mp4; codecs="avc1.42E01E, mp4a.40.2"')) {
          document.witet("not");
    }
    return;
}
 
检测元素是否保留值
检测元素是否保留相关的值是检测方法中最复杂的。首先需要创建一个虚拟元素,然后检测指定的方法,最后检测该方法的值是否按预期被保留。
如下:
var i = document.createElement("input");
i.setAttrbute("type", "range");
if ( i.type == "text" ) {
    document.write("not");
}
 
处理Ie7, Ie7, Ie6
<!-- [if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
加了这个虽然能然低版本Ie浏览器能够识别HTML5新标签,但它仍然不支持新标签的相应功能。
 
优雅降级:缘于系统在一个或多个组件错误时,应当仍继续运行。在Web开发中这意味着即使在HTML5组件无法被浏览器完全支持时Web页面仍然继续运行。
 
使用CSS媒体查询检测移动浏览器
<link media="screen" rel="stylesheet" href="style.css">
<style>
  @media print{
    //add style here
  }
</style>
CSS3扩充了媒体属性,这样用户可以在各种条件下检测用户代理。浏览器在满足条件的情况下可以输出对应的样式表。如下:
<link rel="stylesheet" media="screen and (max-width:128px)" href="small-srceen.css">
 
 

HTML5 移动开发(移动设备检测及对HTML5的支持)的更多相关文章

  1. 小强的HTML5移动开发之路(18)——HTML5地理定位

    来自:http://blog.csdn.net/dawanganban/article/details/18192091 在前面的<小强的HTML5移动开发之路(2)--HTML5的新特性> ...

  2. 小强的HTML5移动开发之路(13)——HTML5中的全局属性

    来自:http://blog.csdn.net/dawanganban/article/details/18179483 一.accssskey  快捷键 <!DOCTYPE HTML> ...

  3. 小强的HTML5移动开发之路(49)——HTML5开发神器HBuilder

    今天给大家介绍一款开发HTML5的神器--HBuilder. 下载地址:http://www.dcloud.net.cn/ 一.新建文件 可以看到支持web app开发和普通网站前端开发,我们首先建立 ...

  4. 小强的HTML5移动开发之路(3)——HTML5与HTML4比较

    来自:http://blog.csdn.net/dawanganban/article/details/17652873 在前面介绍了HTML5的新特性,新标签的使用,智能表单设计,引入多媒体对象,C ...

  5. 小强的HTML5移动开发之路(15)——HTML5中的音频

    浏览器虽然发展很快,但是浏览器中的标准还是不完善,在HTML4+CSS2+JS的前段开发中让很多程序员头疼的就是浏览器的兼容性问题,音频播放也一样,直到现在,仍然不存在一项网页上播放视频和音频的标准. ...

  6. 小强的HTML5移动开发之路(20)——HTML5 Web SQL Database

    来自:http://blog.csdn.net/dawanganban/article/details/18220761 一.Web Database介绍 WebSQL数据库API实际上不是HTML5 ...

  7. 小强的HTML5移动开发之路(19)——HTML5 Local Storage(本地存储)

    来自:http://blog.csdn.net/dawanganban/article/details/18218701 一.浏览器存储的发展历程 本地存储解决方案很多,比如Flash SharedO ...

  8. 小强的HTML5移动开发之路(17)——HTML5内联SVG

    来自:http://blog.csdn.net/dawanganban/article/details/18189181 一.什么是SVG 可缩放矢量图形是基于可扩展标记语言(标准通用标记语言的子集) ...

  9. 小强的HTML5移动开发之路(2)——HTML5的新特性

    来自:http://blog.csdn.net/dawanganban/article/details/17592787 一.画布(Canvas) 画布是网页中的一块区域,可所以用JavaScript ...

随机推荐

  1. 关于OBS获取显示器黑屏的解决办法

    近来看到许多人说OBS获取显示器源的时候黑屏,下面介绍下相关处理办法. 第一种,先尝试把OBS程序的兼容性设置成Win 7和管理员身份,具体操作: 设置成这样,如果能够获取到显示器,那么问题解决,否则 ...

  2. CSAPP lab2 二进制拆弹 binary bombs phase_4

    给出对应于7个阶段的7篇博客 phase_1  https://www.cnblogs.com/wkfvawl/p/10632044.htmlphase_2  https://www.cnblogs. ...

  3. 【SE】Week7 : Silver Bullet & Cathedral and Bazaar & Big Ball of Mud & Waterfall ...

    1. Silver Bullet No Silver Bullet: Essence and Accidents of Software Engineering —— 无银弹理论,出自于美国1999年 ...

  4. Daily Scrum NO.3

    工作概况 符美潇(PM) 昨日完成的工作 1.Daily Scrum.日常会议及日常工作的分配和查收. 2.整合各DEV所写的代码,在TFS上进行Beta阶段第一次代码签入. 今日工作 1.Daily ...

  5. Daily Scrum 10.21

    然后由于服务器端有变化,另外具体IDE已经确定,接下来对已经分配下去的任务做些细节补充: 10.20日晚所有人必须完成AS的配置,统一版本为1.3.2,安卓版本为4.4.0,可视化界面手机为Nexus ...

  6. vs2013安装过程及使用心得

    进入http://www.itellyou.cn/ 方法/步骤 1 1:点击中文简体 2:钩出前面的空格 3:点击详细信息 4:复制到网页进行搜索迅雷下载   等待下载完成之后,双击文件 我们双击文件 ...

  7. yum 安装mongodb mysql

    // 云环境下更新包 (center os)yum update (多更有益) 修改yum包管理配置:vi /etc/yum.repos.d/mongodb-org-3.4.repo // 会自动新建 ...

  8. UML时序图学习

    定义 时序图主要用于展示对象之间交互的顺序. 时序图将交互关系表示为一个二维图.纵向是时间轴,时间沿竖线向下延伸.横向轴代表了在协作中各独立对象的类元角色.类元角色用生命线表示.当对象存在时,角色用一 ...

  9. MacBook Pro 电池寿命

    MacBook Pro 电池寿命 https://www.apple.com/cn/macbook-pro/specs/ https://www.zhihu.com/question/19709979 ...

  10. maven上传jar包到nexus私服后的存放路径 以及 使用IDEA上传jar包的步骤

    maven上传jar包到nexus私服的方法,网上大神详解很多,那么上传后的jar包存放到哪里了呢? 在下使用nexus3.2.1版本,在本地搭建了私服,使用maven上传jar包.最后结果如下: 点 ...