应优先运行时检测 HTML5 特性而非依赖 DOCTYPE 或 UA 判断，如 localStorage、history.pushState、canvas.getContext 等，并用 Modernizr 定制构建；服务端 UA 仅作简单资源降级，真实用户监控更有效。
直接看 浏览器 是否支持关键 HTML5 API，而不是查文档或看 DOCTYPE—— 本身不保证兼容性，只声明解析模式。
用 JavaScript 检测核心 HTML5 特性是否存在
最可靠的方式是运行时检测（feature detection），而非 UA 判断。现代网站应优先检查 localStorage、history.pushState、querySelector、canvas.getContext 等实际用到的 API。
-
typeof localStorage !== 'undefined'—— 注意 Safari 无痕模式下会抛异常，需 try/catch 包裹 -
typeof history.pushState === 'function'—— IE9 及以下返回undefined，但部分 IE10+ 移动版有 bug -
document.createElement('canvas').getContext—— 返回function才算真正支持 canvas 渲染 -
'ontouchstart' in window或!!window.TouchEvent—— 区分触控能力，不是所有 HTML5 浏览器都支持 touch 事件
避免依赖 Modernizr 的默认全量检测
Modernizr 是工具，不是标准。它生成的 modernizr.js 默认检测上百项，但多数项目只用其中几项。盲目引入会拖慢首屏，且某些检测（如 input[type="date"]）在 Chrome 中返回 true，实际体验却因系统级日历缺失而降级。
- 用 Modernizr 定制构建页 只勾选你真正在用的特性（如
websockets、flexbox、audio） - 检测结果写在
class 上（如no-flexbox），CSS 中用.flexbox .container {display: flex;}控制样式 - 不要把 Modernizr 当 polyfill 加载器——它不自动注入
es6-promise或fetch，那得靠loadjs或polyfill.io
服务端 UA 判断仅作兜底，不可信
服务端通过 User-Agent 字符串识别浏览器版本，对 HTML5 兼容性参考价值极低。例如：
立即学习 “ 前端免费学习笔记（深入）”；
- Android 4.3 自带浏览器 UA 含
WebKit/534.30，看似新，但不支持Promise和classList - 微信 内置浏览器（X5 内核）UA 里写
Chrome/67，实际 JS 引擎是旧版 JSCore，Array.from直接报错 -
MSIE 10.0支持canvas，但canvas.toBlob()要到 Edge 14 才有
如果必须服务端区分，只用于简单资源降级（如给 IE9 返回 video.mp4 而非 video.webm），别用来决定是否加载 ES6 模块。
真实用户监控比预设检测更有效
上线后用 window.onerror + performance.getEntriesByType('navigation') 记录失败率，比开发时模拟更有说服力：
if ('sendBeacon' in navigator) {window.addEventListener('error', (e) => {navigator.sendBeacon('/log', JSON.stringify({ url: location.href, error: e.error?.toString() || e.message, ua: navigator.userAgent })); }); }你会发现：某些“理论上兼容 HTML5”的设备（如国产低端平板的定制 Android 6 系统），fetch 会静默失败，Intl.DateTimeFormat 报 RangeError，这些根本不在任何检测清单里。
