做前端开发的兄弟，估计都被“浏览器兼容性”这四个字折磨过。
以前我们总想着把IE8、IE9都伺候好，结果头发掉了一把，最后发现用户根本不用那些古董浏览器。现在呢？风向变了。
很多刚入行的朋友，或者甲方爸爸，总问：制作网页时一般需要兼容哪些浏览器？
我的回答很直接：别搞那些虚头巴脑的“全兼容”，那是扯淡。你要抓的是大头，是那些真金白银砸进来的流量。
先说结论。目前主流就三个阵营：Chrome系、Safari系、还有那个让人又爱又恨的微信内置浏览器。
第一梯队：Chrome及其衍生版。
这不用多说，全球市场份额超过70%。不管你是用Chrome、Edge、还是360浏览器的极速模式，底层都是Blink内核。
做开发时，你在Chrome里调通了，基本就稳了一半。
但我得提醒你，Chrome版本更新极快。有时候你本地是110版，客户用的是105版，CSS新特性比如container query或者:has选择器，低版本直接报错。
所以，别只测最新版。去DevTools里模拟一下旧版本，或者看看你的用户画像。如果是ToB的企业后台，Chrome基本通吃。如果是ToC的营销页，还得往下看。
第二梯队：Safari。
这是iOS用户的噩梦，也是必须跨过的坎。
iPhone和iPad的用户购买力往往更高。你在Chrome里写得漂漂亮亮的Flex布局，到了Safari上，可能因为一个-webkit前缀没加，或者sticky定位的小bug，直接错位。
我有个案例，之前给一家时尚品牌做H5页面。Chrome上完美运行，结果上线后iOS端转化率暴跌。
排查了半天，发现是CSS的transform: translate3d在Safari里触发硬件加速时，文字渲染出现了锯齿和模糊。
最后加了个backface-visibility: hidden才解决。
这种坑，不踩一次，你记不住。记住，Safari的兼容性测试，不是靠猜，是靠真机。模拟器骗不了人。
第三梯队：微信内置浏览器。
在中国，不做微信兼容，等于自断一臂。
微信内置浏览器基于X5内核（腾讯版Chrome）或WKWebView（iOS版Safari）。
这里有个巨大的坑：不同版本的微信、不同版本的Android系统、不同版本的iOS，内核版本千差万别。
你以为用了最新的ES6语法就万事大吉？
错。很多老旧安卓机上的微信，JS引擎还是旧版的。箭头函数、Promise、async/await，可能直接报语法错误。
我之前做过一个活动页，用了大量的ES6语法。在Chrome模拟器上没问题，一发到朋友圈，部分安卓用户打开就是白屏。
后来加了Babel转译，把代码降级到ES5，才解决。
所以，制作网页时一般需要兼容哪些浏览器？答案就是：Chrome（覆盖大部分安卓和PC）、Safari（覆盖iOS）、微信（覆盖国内移动端主流场景）。
至于Edge？它现在就是Chrome的亲儿子，不用单独测。
至于Firefox？市场份额太小，除非你是做技术社区或者特定行业软件，否则可以忽略。
别再去兼容IE了，除非甲方非要你这么做，并且愿意为此支付高昂的维护成本。
最后总结一下。
做网页兼容，不是要你把所有浏览器都测一遍，那是资源浪费。
你要做的是：
1. 核心功能在Chrome上100%通过。
2. 关键页面在Safari真机上无错位、无样式崩坏。
3. 微信环境做好ES5降级，确保JS不报错。
这就够了。
剩下的，交给概率。
别追求完美，追求的是“够用”和“高效”。
毕竟，老板要的是转化率，不是浏览器兼容性报告。
希望这篇干货，能帮你少加几天班。
本文关键词：制作网页时一般需要兼容哪些浏览器
