响应式网站设计（10）-兼容性处理

兼容性处理

浏览器

现在主流的浏览器大多自带调试工具，可以通过快捷键 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来安装。

移动端浏览器调试

移动端浏览器的调试，一般采用真实的手机来调试。但是，不可能把全部类型的手机都买来，我们可以参考友盟官网数据统计来购买测试机，或者进行云测试，比如：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）：

（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 官网（网址：https://caniuse.com/）查看属性的兼容性，而后在进行处理。

在多个设备上进行调试

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

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

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），否则输入上面指令之后，没有任何反应，正常的反应如下：

此时，在不同设备或浏览器中打开http://localhost:3000/（本人打开了IE浏览器，Chrome浏览器，小米note3浏览器），在滚动一个浏览器的时候，三个设备同时滚动。如图：

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