浏览器兼容性检测（Browser Compatibility Detector）

• 运行时能力检测（Runtime Capability Check）

  直接在当前浏览器上下文验证 API 是否真实可用，避免只看 User-Agent 导致的误判。

• Web API 兼容性检测

  覆盖权限、剪贴板、存储、安全、网络、设备等高频接口，支持快速识别不支持与部分支持项。

• CSS / JavaScript 特性兼容性检测

  支持 Grid、Container Queries、:has()、Nesting、structuredClone、Promise.any 等现代能力检查。

• 媒体能力与编解码能力检测

  涵盖 WebRTC、MediaRecorder、屏幕共享、WebCodecs 及常见音视频格式播放能力核验。

• 浏览器版本对照参考

  关联 MDN Browser Compatibility Data，辅助制定最低支持版本与发布兼容矩阵。

• 结果复制与报告沉淀

  一键复制检测结果，便于输出测试报告、上线检查单、缺陷单和兼容性基线文档。

1. 1

   先明确目标浏览器范围（如 Chrome / Edge / Firefox / Safari 最低版本）和核心业务路径。

2. 2

   按分类执行检测（概览、图形、媒体、存储、设备、安全、CSS/JS），获取当前环境能力快照。

3. 3

   优先处理“不支持”与“部分支持”项，标记是否影响登录、支付、上传、播放等关键流程。

4. 4

   结合 MDN 版本参考判断是否需要 Polyfill、降级实现或功能开关（Feature Flag）。

5. 5

   在真实设备与真实网络环境复测，确认权限、HTTPS、COOP/COEP、硬件加速等约束影响。

6. 6

   将结果沉淀到发布清单与回归用例，形成可复用的浏览器兼容性治理流程。

• 实时浏览器能力检测：直接输出当前页面上下文的可用性，而非静态猜测。
• 权限与安全上下文检查：聚焦 geolocation、clipboard、notifications、secure context、cross-origin isolation。
• 媒体与图形能力检测：覆盖 WebGL/WebGPU、WebRTC、MediaRecorder、WebCodecs、Picture-in-Picture。
• 存储与离线能力检查：localStorage、sessionStorage、IndexedDB、Cache API、Service Worker、Storage Estimate。
• 现代 CSS 兼容性检测：Grid、Container Queries、:has()、Nesting、View Transitions、动态视口单位。
• 现代 JavaScript 兼容性检测：ES Modules、dynamic import、structuredClone、BigInt、URLPattern、Intl.Segmenter。
• 浏览器版本兼容参考：对照 Chrome、Edge、Firefox、Safari 支持版本辅助技术决策。
• 检测结果可复制导出：便于团队协作、缺陷跟踪、发布评审与审计留痕。

如果问题报告里只有一段原始 UA 或服务端日志，可以先用 User-Agent 解析 还原浏览器、系统、设备与机器人线索；如果故障发生在回调、跳转或深链之后，再配合 URL 工具 一起看，让链接结构和运行时能力证据保持在同一条排查线上。

• 发布前兼容回归测试

  上线前在目标浏览器矩阵执行 Browser Compatibility Test，提前发现能力缺口。

• 线上浏览器问题排障

  针对“某浏览器白屏/按钮不可点/媒体无法播放”等问题快速定位缺失 API。

• 跨浏览器登录与支付流程验证

  检查权限、安全上下文、存储与网络能力，避免关键链路在特定浏览器失效。

• 媒体播放与实时通话能力验证

  核验 WebRTC、编解码、录制与屏幕共享支持情况，降低音视频功能风险。

• CSS 新特性引入评估

  在使用 Container Queries、:has()、Nesting 前评估浏览器覆盖与降级成本。

• Polyfill 与降级方案制定

  依据 Partial/Unsupported 结果决定是否引入 Polyfill、替代实现或特性开关。

• 测试用例与质量门禁补齐

  将高风险检测项转化为自动化用例与发布门禁规则。

• 技术方案评审与团队对齐

  统一输出检测结论，便于产品、前端、测试、运维在同一事实基础上决策。

• 先定义浏览器支持策略（最低版本、移动端范围、企业内网浏览器限制）再解读结果。
• 对检测结果做风险分级：核心流程阻断、可降级体验、可接受差异。
• 针对高风险能力准备 fallback 方案：Polyfill、替代 API、服务端兜底、特性开关。
• 把兼容检测纳入发布流程：PR 检查、预发布验证、版本验收模板。
• 权限相关能力必须做“未授权场景”测试，不只验证已授权路径。
• 媒体与图形能力建议在不同硬件/系统组合复测，关注驱动与加速差异。
• 对安全相关能力同步核查 HTTPS、CSP、COOP/COEP、跨域策略配置。
• 将兼容问题与业务影响绑定，优先修复影响转化、留存与核心任务完成率的问题。

• 同一浏览器在不同操作系统、硬件、企业策略下可能表现不同。
• 权限、隐私模式、无痕模式会显著影响 API 行为，不应仅依赖单次检测结果。
• 检测到“支持”不代表业务一定可用，仍需验证参数、时序、异常处理与回退路径。
• 媒体编解码与图形能力受系统解码器、GPU 驱动、硬件加速状态影响较大。
• MDN 版本信息用于参考，不等同于你当前页面上下文中的真实可用性。
• 跨域、CSP、COOP/COEP、iframe sandbox 等部署策略会改变最终能力暴露情况。