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

痛定思痛。 2021-09-16 04:44 439阅读 0赞

## 兼容性处理 ##

### 浏览器 ###

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

### PC浏览器调试 ###

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

![70][]

### 移动端浏览器调试 ###

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

### 兼容性调试的通用方法 ###

**方法1：csshack**

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

**方法2：respond（js库）**

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

**方法3：html5shiv（js库）**

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

**方法4：modernizr（js库）**

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

![70 1][]

（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/][https_caniuse.com]）查看属性的兼容性，而后在进行处理。

### 在多个设备上进行调试 ###

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

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

![70 2][]

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

![70 3][]

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

[http_192.168.0.104_8888]: http://192.168.0.104:8888/
[IE]: https://developer.microsoft.com/en-us/microsoft-edge/tools/vms/
[Link 1]: https://github.com/xdissent/ievms
[VirtualBox]: https://www.virtualbox.org/
[70]: /images/20210802/2be21c5147374eb8b89a241854674719.png
[https_www.testin.cn]: https://www.testin.cn
[http_www.genymotion.net]: http://www.genymotion.net/
[http_browserhacks.com]: http://browserhacks.com/
[https_github.com_scottjehl_Respond]: https://github.com/scottjehl/Respond
[https_github.com_aFarkas_html5shiv]: https://github.com/aFarkas/html5shiv
[http_modernizr.com]: http://modernizr.com
[70 1]: /images/20210802/a55a20c9f33144ff9383f5674b4726d3.png
[https_caniuse.com]: https://caniuse.com/
[http_browsersync.cn]: http://browsersync.cn/
[70 2]: /images/20210802/8443debcdbf447dd9a3a5b2b564470ae.png
[http_localhost_3000]: http://localhost:3000/
[70 3]: /images/20210802/980a040a9c904827a96a9b55832c9893.png