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. arduino新入手体验:三个小实验

    新入手体验:三个小实验 一:一个LED闪烁 控制要求:1个LED灯,每隔50ms闪烁一次 实物连接图: 控制代码: //2018.6/11 ;//定义数字接口10,对应 void setup() { ...

  2. 新手向:从不同的角度来详细分析Redis

    最近对华为云分布式缓存产品Redis做了一些研究,于是整理了一些基本的知识拿出来与大家分享,首先跟大家分享的是,如何从不同的角度来详细使用Redis. 小编将从以下9个角度来进行详细分析,希望可以帮到 ...

  3. SQLite与ContentProvider

    http://www.rom007.com/SQLite-yu-ContentProvider.html 在Android中,对于数据的存贮,有几种方式,有文件方式,有文件式数据库方式,Android ...

  4. 作业六:分析Linux内核创建一个新进程的过程

    分析Linux内核创建一个新进程的过程 进程描述符PCB----task_struct数据结构 操作系统:1.进程管理 2.内存管理 3 文件系统 一.新进程如何创建和修改task_struct数据结 ...

  5. 第二个Sprint计划

    第一个Sprint计划已完成基本框架,接着第二个计划 时间:5月30-6月3日 目标:能够将各个框架连接起来,实现基本功能,并查看数据库连接. 分工:杜殷浩:查看数据库连接,创建数据库. 何广强:实现 ...

  6. ElasticSearch 2 (7) - 基本概念

    ElasticSearch 2 (7) - 基本概念 摘要 ElasticSearch的一些基本核心概念,理解这些概念有助于ElasticSearch的学习 准实时NRT(Near Realtime) ...

  7. 索引器 C#

    概述 索引器允许类或结构的实例就像数组一样进行索引. 索引器类似于属性,不同之处在于它们的访问器采用参数. 在下面的示例中,定义了一个泛型类,并为其提供了简单的 get 和 set 访问器方法(作为分 ...

  8. 【移动端debug-6】如何做一个App里的web调试小工具

    原文链接:如何做一个App里的web调试小工具 我们知道现在hybrid app非常流行,在这样的app里,h5页面是应用非常广泛的.相对于以往在pc端开发的网页,放在app里的网页由于无法直接使用桌 ...

  9. git查看各个branch之间的关系

    1.pull所有branch for remote in `git branch -r `; do git branch --track $remote; done for remote in `gi ...

  10. 【刷题】BZOJ 3653 谈笑风生

    Description 设T 为一棵有根树,我们做如下的定义: ? 设a和b为T 中的两个不同节点.如果a是b的祖先,那么称"a比b不知道 高明到哪里去了". ? 设a 和 b 为 ...