兼容性处理

浏览器

现在主流的浏览器大多自带调试工具,可以通过快捷键 F12 调出。Firefox除了自带的调试工具外,通常可以使用Firebug调试工具;Safari浏览器自带的调试工具中提供了响应式调试,其中对应多种苹果移动端设备;Opera浏览器自带的调试工具与谷歌类似,但是Opera浏览器开发者版的VPN功能是一大亮点。

PC浏览器调试

IE浏览器调试方法:用IE浏览器打开项目http://192.168.0.104:8888/,通过修改“文档模式”来修改IE的版本进行调试。(ie9不只是picture,ie8以下不支持H5新增标签header、footer、nav、section等)。对于IE浏览器的调试,我们可以使用IETest进行调试,但是建议用虚拟机进行测试。微软官网提供了许多虚拟机下载(网址:IE虚拟机下载),另外,github官网也有虚拟机下载(网址:虚拟机下载),需要虚拟机软件VirtualBox来安装。

响应式网站设计(10)-兼容性处理

移动端浏览器调试

移动端浏览器的调试,一般采用真实的手机来调试。但是,不可能把全部类型的手机都买来,我们可以参考友盟官网数据统计来购买测试机,或者进行云测试,比如:https://www.testin.cn。另外,我们也可以采用虚拟机测试,比如:最快的安卓模拟器  genymotion  (网址:http://www.genymotion.net/),该软件及基于VirtualBox的。

兼容性调试的通用方法

方法1:csshack

推荐网站:http://browserhacks.com/,可以查询多种浏览器的hack写法。

方法2:respond(js库)

推荐网址:https://github.com/scottjehl/Respond,因为ie8以下不支持css3的媒体查询,respond是一种polyfill,应用广泛。(js库)

方法3:html5shiv(js库)

推荐网址:https://github.com/aFarkas/html5shiv,使用范围很广。在ie8以下版本的IE浏览器不支持新增的标签,通过引入html5shiv,可以支持新增的标签,具体方法可以通过条件表达式引入。(js库)

<!--[if lt IE 9]>
	<script src="bower_components/html5shiv/dist/html5shiv.js"></script>
<![endif]-->

方法4:modernizr(js库)

推荐网址:http://modernizr.com 引入该js库,会检测浏览器对css3的支持情况,如果支持,会对元素添加对应的类;反之,增加no-开头的类;主动检测兼容性,是一种防御性编程思想。使用方法举例(查看是否支持svg):

响应式网站设计(10)-兼容性处理

(1)按图所示,进行操作;

(2)在项目中新建modernizr.js,将生成的代码复制到modernizr.js中,在项目中引入(第一个引入,首先检测),即可检测是不是浏览器是不是支持svg。

(3)运行项目,打开开发者工具,发现html标签新增了class = “svg”。

(4)根据是否支持svg格式的文件,我们可以全面的考虑属性样式。比如:

.svg .logo {
    background-image: url("img/logo.svg");
}

.no-svg .logo {
    background-image: url("img/logo.png");
}

备注:在处理兼容性问题之前,我们首先登录Can I Use 官网查看属性的兼容性,而后在进行处理。

在多个设备上进行调试

在项目完成的时候,我们需要在不同的设备上进行调试,比如:安卓手机,苹果手机,iPad等等。我们每修改一次代码,我们就要在每种设备上刷新一次,修改代码→刷新→修改代码→刷新→修改代码→刷新……无语,这肯定是会花费我们大量的时间。我们推荐使用browsersync,一款省时的浏览器同步测试工具,解决上述问题。

Browsersync能让浏览器实时、快速响应您的文件更改(html、js、css、sass、less等)并自动刷新页面。更重要的是 Browsersync可以同时在PC、平板、手机等设备下进项调试。您可以想象一下:“假设您的桌子上有pc、ipad、iphone、android等设备,同时打开了您需要调试的页面,当您使用browsersync后,您的任何一次代码保存,以上的设备都会同时显示您的改动”。无论您是前端还是后端工程师,使用它将提高您30%的工作效率。

Browsersync使用方法:

1、安装

npm install -g browser-sync

2、启动

browser-sync start --server "src" --files "src"

备注:–server “src” 表示服务器设置到src目录下, –files “src” 表示Browsersync会监听files参数下src文件夹下的所有文件的修改(实际上,我们可以单独监听某一文件“**/*.css”)

注意:启动browsersync的前提是已经安装了browsersync,并且项目启动(http-server src),否则输入上面指令之后,没有任何反应,正常的反应如下:

响应式网站设计(10)-兼容性处理

此时,在不同设备或浏览器中打开(本人打开了IE浏览器,Chrome浏览器,小米note3浏览器),在滚动一个浏览器的时候,三个设备同时滚动。如图:

响应式网站设计(10)-兼容性处理

在修改的同时,也会同时自动刷新,对于调试很方便的。更多内容,请参考官网。