zoukankan      html  css  js  c++  java
  • 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-128px)" href="small-srceen.css">
     
     
    通过分享,结交好友~ 如本文对您有益,请给予关注。转载请注明出处!-- 小数
  • 相关阅读:
    重复的listen port引发的问题
    Win10开始运行不保存历史记录原因和解决方法
    意识到const版本函数的重要性
    人物访谈1
    人物访谈2
    读《浪潮之巅》有感
    测试作业
    读《活出生命的意义》有感
    价值观作业
    关于C语言的问卷调查
  • 原文地址:https://www.cnblogs.com/mcat/p/3888525.html
Copyright © 2011-2022 走看看