处理浏览器兼容性办法

    xiaoxiao2021-03-25  151

    对于搞前端的筒子们来说,兼容性无异于是基础并头疼问题,一直嚣张的不行啊,我仅用我勉强的功力,说说我知道的处理办法,要是有大神知道更好的或者写的有出入的地方还请指点一二。

    首先,明确支持哪些浏览器,风烛残年般的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来查看浏览器的兼容情况,然后再考虑是否使用以及各解决方案。

    至此,分享大概就是这些了,后面如果发现好用的库会及时分享哒~

    转载请注明原文地址: https://ju.6miu.com/read-1740.html

    最新回复(0)