HTML5 移动开发（移动设备检测及对HTML5的支持）

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">