对于搞前端的筒子们来说,兼容性无异于是基础并头疼问题,一直嚣张的不行啊,我仅用我勉强的功力,说说我知道的处理办法,要是有大神知道更好的或者写的有出入的地方还请指点一二。
首先,明确支持哪些浏览器,风烛残年般的IE6,7,8使用的是越来越少,比如现在
jquery2.x版本已经不支持他们了,知道了要兼容的浏览器,下面就是浏览器调试的问题了。
先说说桌面端浏览器的调试。
方法一
下载所需兼容的浏览器直接测试,有页面需要修改的,直接调试兼容, 调试的时
候,有的浏览器自带调试工具,比如chrome,Safari和火狐。
方法二
在实际情况中,一个项目所需兼容的浏览器可能很多,下载这么多的浏览器到本机
上,虽不会造成太大影响,但也是有些多余啊(反正我是这么想的),那么,就可
以使用虚拟机来代替。微软官方提供了很多版本的虚拟机,也可以通过https://github.com/xdissent/ievms 来获得各版本,使用VirtualBox免费的虚拟机软件来安装。
安装各个版本的windows系统,下载好各版本的原生的IE浏览器,进行测试。
方法三
直接用测试工具,比如IETester,经常用来测试IE的各个版本的工具。有90%的可靠性。
再说说移动端浏览器调试,
方法一
针对移动端,可以真机进行测试。购买主流的手机进行测试即可。
方法二
可以使用一些云测试一类,比如 http://www.testin.cn 可以对一些网站和app进行测试(貌似收费),针对IOS系统,支持ios7,8,9。如果mac os系统,安装xcode就会有虚拟测试机。那对于安卓机呢,就有 http://www.genymotion.net 安卓模拟器,不过是基于VirtualBox的,下载安装即可。
上面我们说的都是调试各个浏览器,针对兼容性问题有没有通用的方法呢?一般来说,其实是有下面几种通用的处理兼容性的方法:
1.csshack
只要增加相应浏览器的兼容字符就可以了。在 http://browserhacks.com/ 这个网站中,就可以查到浏览器hack的写法。
2.polyfill和shim
靠旧的环境中的一些手段来支持新的API和一些特性,这些新的特性在浏览器中就可以正确的使用。比如 https://github.com/aFarkas/html5shiv/ 就是一个很出名的解决兼容性的shim,那它有什么作用呢,在一些老的IE,IE6,7,8它是不支持html5的标签的,那么相应的样式,肯定也是不支持的,通过这个shim,引入这么一个库,就可以使这些IE正常访问页面。
<!--[if lt IE 9]> <script src="bower_components/html5shiv/dist/html5shiv.js"></script> <![endif]-->还有IE6-8不支持css3的媒体查询,那么,这么一个js库同样有名的polyfill, https://github.com/scottjehl/Respond 如果需要在IE6-8也实现响应式设计,就需要用IE的条件表达式来引入respond库,respond库polyfill for min/max-width CSS3 Media Queries (for IE 6-8, and more) ,主要支持min/max-width媒体查询。
3.modernizr.js
http://modernizr.cn/ Modernizr 是一个 JavaScript 库,用于检测用户浏览器的 HTML5 与 CSS3 特性。
为什么使用 Modernizr
使用炫酷新颖的 web 技术是一件很有趣的事情,但你不得不面对落后的浏览器。Modernizr 使你可以方便地为各种情况编写 JavaScript 和 CSS,无论浏览器是否支持这些特性。这是处理渐进增强的完美方案。
工作原理
Modernizr 会在页面加载后立即检测特性;然后创建一个包含检测结果的 JavaScript 对象,同时在 html 元素加入方便你调整 CSS 的 class 名。
其实,在你使用标签或样式之前呢,可以登录 http://caniuse.com/ caniuse来查看浏览器的兼容情况,然后再考虑是否使用以及各解决方案。
至此,分享大概就是这些了,后面如果发现好用的库会及时分享哒~