首页 > 代码库 > HTML5 移动开发（移动设备检测及对HTML5的支持）

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

2024-07-15 13:39:40   226人阅读

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="http://www.mamicode.com/style.css">
<style>
  @media print{
    //add style here
  }
</style>
CSS3扩充了媒体属性，这样用户可以在各种条件下检测用户代理。浏览器在满足条件的情况下可以输出对应的样式表。如下：
<link rel="stylesheet" media="screen and (max-width:128px)" href="http://www.mamicode.com/small-srceen.css">
 
 


联系
我们