制作网页时一般需要兼容哪些浏览器？别瞎折腾，这3个才是真金白银

做前端开发的兄弟，估计都被“浏览器兼容性”这四个字折磨过。

以前我们总想着把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不报错。

这就够了。

剩下的，交给概率。

别追求完美，追求的是“够用”和“高效”。

毕竟，老板要的是转化率，不是浏览器兼容性报告。

希望这篇干货，能帮你少加几天班。

本文关键词：制作网页时一般需要兼容哪些浏览器