17370845950

应优先运行时检测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，这些根本不在任何检测清单里。