H5新增特性及H5对低版本浏览器兼容

H5新增特性

1.video/audio  视频/音频

2.canvas 绘画

3.geolocation 定位

4.WebSocket 前后端双向通讯

5.localStorage/sessionStorage代替cookie本地存储

6.文件拖拽(drag事件+dataTransfer+FileReader)

7.WebWorker js多线程,提高性能

8.WebSQL 前端数据库(已被官方弃用)

9.manifest 离线缓存

兼容处理(解决IE低版本对H5的兼容问题)

1.H5新增标签在低版本浏览器无法被识别时会将无法识别的标签解析为inline(行内元素),所有我们要把必要标签转化为block就可以使用,但是在IE9版本以下,无法解析这些标签,我们就可以通过document.creataElement(‘tagname’)来创建自定义标签,来替代那些标签这样低版本的IE也可以使用那些H5标签

2.处理方式:在实际开发中我们更多采用的是通过检测IE浏览器的版本来加载三方的一个JS库来解决兼容问题(测试在IE下面的兼容性:ieTester软件的使用)

主要是针对于ie低版本的,也就是只有低版本ie才执行才对

<!--[if !IE]><!--> 除IE外都可识别 <!--<![endif]-->
<!--[if IE]> 所有的IE可识别 <![endif]-->
<!--[if IE 6]> 仅IE6可识别 <![endif]-->
<!--[if lte IE 6]> IE6以及IE6以下版本可识别 <![endif]-->
<!--[if gte IE 6]> IE6以及IE6以上版本可识别 <![endif]-->
<!--[if IE 7]> 仅IE7可识别 <![endif]-->
<!--[if lt IE 7]> IE7以下版本可识别 <![endif]-->
<!--[if gt IE 7]> IE7以上版本可识别 <![endif]-->
<!--[if IE 8]> 仅IE8可识别 <![endif]-->
<!--[if IE 9]> 仅IE9可识别 <![endif]-->
<!-- 条件注释  ie 6.7.8 能执行,其余浏览器忽略这句话 -->
<!--[if lt IE 9]>   

   <script src="js/html5shiv.min.js"></script> 

<![endif]-->

html5shiv.min.js

respond.js 都可以解决这个问题 原理是使用正则表达式来匹配标签

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值