HTML Academy · 课时

功能检测与浏览器嗅探

Q: 「功能检测与浏览器嗅探」这节课中我会学到什么？

使用功能检测，而不是用户代理嗅探 你通过在浏览器中直接运行的动手代码来练习 HTML Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

使用功能检测，而不是用户代理嗅探

功能检测与浏览器嗅探 是 CoddyKit 上的免费 HTML Academy 课时。这是第 2 节课，共 4 节。你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。这是 HTML Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 HTML Academy 课程共包含 4 节课。

兼容性的两种方法

要了解当前浏览器是否支持某项特性，您可以直接检测特性（"IntersectionObserver" in window），也可以嗅探用户代理字符串（navigator.userAgent.includes("Chrome")）。前者可靠，后者则是长期存在的错误来源。

为什么嗅探会失败

用户代理字符串会说谎。Edge 声称自己是 Chrome（同时也是 Safari 和 Firefox）。Android 上的 Chrome 与 iOS 上的 Chrome 会发送不同的 UA。出于隐私考虑，浏览器会遵循对 UA 字符串进行“冻结”的做法。任何基于 UA 字符串的逻辑每隔几个月就会失效。

特性检测模式

检查代码实际需要的应用编程接口：if ("IntersectionObserver" in window) { ... }。如果属性存在，浏览器就支持该特性；如果不存在，就走回退路径。这种检查直接、快速，并且面向未来。

if ("IntersectionObserver" in window) {
  const observer = new IntersectionObserver(handler);
} else {
  loadPolyfill().then(() => { /* use IntersectionObserver */ });
}

先检测，再使用

检测必须与真正的回退方案配套。检测缺失的特性只有在您知道缺失时该做什么才有用——可以加载垫片、渲染静态替代方案，或完全隐藏该功能。

CSS 特性查询

CSS 也有自己的特性检测：@supports (display: grid) { ... }。只有当浏览器理解这组属性和值时，其中的代码块才会生效。您可以用它发布网格布局，并为旧式浏览器提供基于浮动的回退方案。

@supports (display: grid) {
  .grid { display: grid; gap: 16px; }
}
@supports not (display: grid) {
  .grid > * { float: left; width: 33%; }
}

用户代理客户端提示

现代浏览器通过 navigator.userAgentData 提供结构化信息（仅限 Chromium）。它返回品牌与版本对，而不是自由格式的字符串。不过仍应优先使用特性检测——只有在无法通过属性检查推断能力时，用户代理提示才有用。

何时可以接受嗅探

用户代理检测唯一狭窄且合理的用途，是避开存在错误的浏览器：例如 X 版本的 iOS Safari 存在已知错误。即便如此，也应优先采用基于特性的排除方式（CSS.supports("aspect-ratio: 1")）。用户代理检测应作为最后手段。

Modernizr 风格的库

Modernizr 将许多特性检测打包在一起，并将结果作为类暴露在 <html> 元素上（html.flexbox、html.no-flexbox）。现代项目很少需要它——大多数检测只需一行代码——但它对于旧项目迁移仍然有用。

测试回退方案

完成检测后，请测试两条路径。打开 DevTools，将该特性覆盖为 undefined，并验证回退方案能够正常工作。未经测试的回退方案会逐渐失效——等到用户真正需要它们时，往往会以开发者从未想到的方式失败。

框架中的检测

React、Vue 及其他框架没有专门的检测接口——请在 effect 或组件初始化过程中使用普通 JavaScript。服务器呈现的应用必须在客户端进行检测，因为在 SSR 期间 "IntersectionObserver" in window 的值是 undefined。

避免基于能力的用户代理嗅探

有些团队会检查用户代理，以猜测设备能力（“这是 iPhone 吗？那它大概支持触摸。”）。这混淆了两个毫不相关的概念。请通过 "ontouchstart" in window 直接检测触摸；更好的做法是优先使用抽象了输入方式差异的指针事件。

知识检查

在处理浏览器能力时，为什么特性检测比用户代理嗅探更受推荐？

总结

请优先使用特性检测（"API" in window），而不是嗅探用户代理。CSS 有 @supports 可用于相同目的。请始终为检测配备真正的回退方案，并测试两条路径。用户代理嗅探只能用于避开已知存在错误的浏览器版本，绝不能用于猜测能力。

常见问题解答

「功能检测与浏览器嗅探」课时是免费的吗？

是的 — 「功能检测与浏览器嗅探」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 HTML Academy 课程的其余内容，请升级到 CoddyKit PRO。 HTML Academy 课程共包含 4 节课。

「功能检测与浏览器嗅探」这节课中我会学到什么？

使用功能检测，而不是用户代理嗅探你通过在浏览器中直接运行的动手代码来练习 HTML Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 HTML Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 HTML Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。这是第 2 节课，共 4 节。

「功能检测与浏览器嗅探」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 HTML Academy 课中编写并运行代码吗？

能。每节 HTML Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

← 返回 HTML Academy