前端适配不同浏览器的实用技巧

为什么浏览器适配让人头疼

打开自己写的网页，在 Chrome 上显示正常，换到 Safari 或 Edge 却乱了布局，按钮点不动，动画卡住。这种情况很多人都遇到过。不同浏览器对 HTML、CSS 和 JavaScript 的解析方式有差异，尤其是老版本的 IE，简直是前端开发者的噩梦。

比如你用了 flex 布局，在现代浏览器上很顺滑，但某些旧手机浏览器可能只支持带前缀的 -webkit- 版本，不加就直接失效。

CSS 兼容性处理小妙招

写样式时别只盯着最新语法。像圆角、阴影这些常见效果，虽然现在大多数浏览器都支持，但为了保险，可以手动加上厂商前缀：

.btn {
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  -webkit-box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

更省事的方法是用 Autoprefixer 配合构建工具，它能自动分析目标浏览器范围，补全需要的前缀。

JavaScript 的兼容写法

ES6 之后新增了很多好用的语法，比如箭头函数、const、let、解构赋值。但如果你的用户还在用 IE11，这些都会报错。这时候可以用 Babel 把新语法转成旧版能理解的形式。

另外一些 DOM API 也存在兼容问题。例如 dataset 属性在 IE10 才开始支持，之前得靠 getAttribute('data-xxx') 来读取自定义数据。

使用 Polyfill 弥补功能缺失

有些浏览器缺少某些内置方法，比如 Array.prototype.includes 在老版本中不存在。直接调用会报错。引入一个轻量 polyfill 就能解决：

<script src="https://cdn.jsdelivr.net/npm/array-includes-polyfill@1.0.0/index.js"></script>

或者统一使用 core-js 这类库，按需加载所需补丁。

响应式设计也要考虑浏览器能力

做移动端适配时，除了屏幕尺寸，还得留意浏览器是否支持 viewport 单位、rem 计算、touch 事件等。有些国产定制浏览器虽然基于 WebKit，但对 CSS 特性的支持并不完整。

建议在项目初期就明确支持的浏览器范围，比如“IE10+，主流移动浏览器近两年版本”，然后根据这个标准选择技术方案。

测试不能偷懒

本地开发只看 Chrome 很容易踩坑。上线前一定要在目标浏览器中实际测试。可以借助 BrowserStack 或 Sauce Labs 这样的在线平台，模拟各种设备和浏览器环境。

如果条件有限，至少要在 Windows 的 Edge、macOS 的 Safari、安卓机自带浏览器上跑一遍核心功能。

用 Can I Use 查资料

遇到不确定的特性时，直接去 caniuse.com 搜一下。输入 grid layout 或 fetch，就能看到各浏览器的支持情况，甚至还能查到国内用户的覆盖率数据，帮你决定要不要用某个新特性。

比如你发现 Grid 在 QQ 浏览器 X5 内核里表现异常，那就要提前规避或降级处理。