服务器浏览器适配保姆级教程：再也不用挨个改bug

1. 上线前先做本地排查，别等上传服务器才踩坑

很多人适配的第一步骤就错了。改完代码直接打开本地HTML文件测，觉得没问题就上传服务器，结果一上线就崩。这一步提前做，能省你一半改bug的时间。

1.1 先列清楚适配的浏览器范围，别做无用功

别傻呵呵上来就全版本适配，纯纯浪费时间。你先搞清楚目标用户用啥浏览器。

• 如果是面向中老年人的项目，重点适配360兼容模式、IE11
• 如果是面向年轻人的产品，只要适配Chrome、Edge、Safari就行
• 如果是To B的企业项目，先问甲方内部要求的浏览器版本

举个例子，我之前帮朋友做社区团购的后台。一开始全按Chrome做，结果团长们都用电脑自带的IE11，打开直接全乱。后来提前列了适配清单，只测要求的版本，省了一半的时间。

1.2 本地模拟服务器环境测试，不用上传也能测

本地直接打开HTML文件，和上传到服务器的环境完全不一样。很多本地没问题，上线就崩的bug，都是这一步没做。

操作很简单：用vscode的话，直接装个Live Server插件，右键点HTML文件选「Open with Live Server」，就能启本地服务。这个环境和你上传到服务器的效果一模一样，提前测就能筛掉80%的路径、加载问题。

避坑提醒：别用微信内置浏览器直接测本地文件，缓存能坑死你。每次测之前一定要清缓存，或者开无痕模式。

2. 上传服务器后必做的3个适配操作，少一个都容易崩

本地测完没问题，上传服务器之后，这三个操作一定要做，不然很容易出适配问题。

2.1 给服务器加响应头，强制浏览器用最新内核渲染

很多时候网页崩，不是你代码写得差，是浏览器自作主张用了旧内核渲染。比如360、QQ这些双核浏览器，默认可能用IE兼容模式打开，啥好看的样式都给你搞崩。

操作很简单：给你的服务器加个响应头就行，Nginx的话直接把下面这段代码复制到配置的server块里，重启就生效。

``` add_header X-UA-Compatible "IE=Edge,chrome=1"; ```

说白了就是告诉浏览器，别用旧的兼容模式，用你最新的内核渲染页面。加了这个头之后，360、IE这些浏览器打开你的页面，都会默认用最新内核，能解决一半的兼容问题。

2.2 静态资源全用相对路径，别写本地绝对路径

很多人上传之后样式全丢、图片全裂，都是路径写错了。你本地写的C:/项目/1.jpg，服务器上根本没有这个路径，肯定找不到。

操作规则：所有的CSS、JS、图片路径，全写成相对路径。比如./static/css/style.css这种，或者用//开头的协议相对路径，比如//你的域名.com/1.jpg，http和https环境都能用。

避坑提醒：路径别写大写，服务器的Linux系统是区分大小写的。你本地Windows不区分，叫1.JPG和1.jpg都能打开，上传到服务器就找不到了，全改成小写最稳妥。

2.3 老浏览器补兼容垫片，不用自己写兼容代码

如果要兼容IE10、IE11这些老浏览器，也不用你自己死磕写兼容代码，有现成的工具帮你搞定。

• JS的ES6语法IE不认识，直接引入babel-polyfill，自动转成ES5的语法
• CSS的新属性比如flex布局不兼容，直接用postcss的autoprefixer，自动给你加-webkit-、-ms-这些前缀

举个例子，之前我做的项目要兼容IE10，flex布局打开全乱。加了autoprefixer之后，自动生成-ms-flex的兼容代码，啥也不用改直接就正常了。

3. 出问题快速排查的2个实用技巧，10分钟定位bug

真要是上线之后发现适配问题，也别慌，用这两个方法很快就能找到问题。

3.1 用自带的兼容模式模拟，不用装一堆老浏览器

不用专门装IE、老版本Chrome这些浏览器测试，现在的Edge浏览器自带IE模式。

操作步骤：按F12打开开发者工具，点右上角的「设置」，找到「模拟」选项，里面可以选IE10、IE11各种版本，直接就能看效果。要是需要测更多小众浏览器，直接用在线工具BrowserStack，各种系统各种浏览器版本都能测，不用自己装一堆虚拟机。

3.2 加用户访问统计，定位小众浏览器问题

要是你自己测啥问题没有，总有用户说页面崩，大概率是他用了非常小众的老浏览器。

操作很简单：在页面里加个百度统计或者谷歌分析的代码，就能看到所有访问用户的浏览器、版本、系统信息。要是遇到那种十年前的傲游、世界之窗这类浏览器，你不用死磕适配，直接给个弹窗提示，让用户换Chrome就行，没必要为了1%的用户浪费90%的精力。

今天说的这些方法，都是我做了十年前端，踩了上百个适配坑攒出来的。没有啥复杂的理论，全是照着就能做的操作。你现在就打开你最近要上线的项目，先花10分钟列个适配清单，再用本地服务跑一遍测效果，上传之后把响应头配上。一套操作下来，基本不会出啥大的适配问题。要是真遇到搞不定的特殊情况，你评论区说下具体场景，我给你出解决方案。别等用户或者甲方找过来才着急改，提前花10分钟测一遍，能省你好几天的功夫。