旧版浏览器不支持HTML5小游戏因缺失关键API，应优先优雅降级而非硬兼容；需通过能力检测（非UA匹配）判断环境，对Canvas、Audio、Storage做最小可用降级，并显示友好引导提示。
旧版浏览器（如 IE9 及更早、Android 4.4 WebView、部分国产双核浏览器）不支持 HTML5 小游戏，本质是缺失关键 API 支持，不是加个 polyfill 就能跑起来的。强行降级往往不如明确提示 + 引导升级来得可靠。
判断是否真的需要兼容旧浏览器
先确认你的用户里有没有真实依赖旧环境的人：比如企业内网系统锁定 IE8、老年机用户、离线教育设备等。如果只是“怕有人用老版本”，而实际访问日志里 navigator.userAgent 显示近 99% 是 Chrome/Firefox/Safari/Edge 79+，那优先做优雅降级而非硬兼容。
- 用
Modernizr或手动检测关键能力，例如：'WebSocket' in window、'requestAnimationFrame' in window、!!document.createElement('canvas').getContext - 避免只靠
navigator.userAgent字符串匹配——它容易被伪造，且新版 Edge/Chrome 仍可能带 “Trident” 或 “WebKit” 字样 - 若检测失败，不要立即跳转或报错，先保留页面结构，仅禁用游戏入口并显示引导层
对关键 API 做最小可用降级
Canvas 渲染、音频播放、本地存储这三项最容易出问题，但并非所有都值得降级：
-
canvas：IE8 及以下完全无支持，excanvas.js仅支持 2D 基础绘图，无法跑 WebGL 或复杂动画——建议直接放弃，改用 SVG 静态图 + CSS 动画示意玩法 -
AudioContext：IE 仅支持new Audio()，且不支持 Web Audio API 的音效混音、滤波等。可 fallback 到audio.play()播放预切好的 MP3，但需注意 iOS Safari 早期版本需用户手势触发 -
localStorage：IE8 支持，但容量小（约 10MB）、写入慢；IE7 及以下只能用userData行为（已废弃）。建议用try...catch包裹写入逻辑，失败则退化为内存缓存（刷新即丢）
显示友好提示而不是报错页
用户看到 SCRIPT5009: 'Promise' is undefined 或白屏，第一反应是“网站坏了”。应该在页面加载初期就完成环境检测，并给出可操作反馈：
立即学习“前端免费学习笔记（深入）”；
- 用固定定位浮层覆盖游戏区域，背景半透、文字清晰，包含：一句简明原因（如“您的浏览器版本过低，暂不支持本游戏”）、一个明确动作（“点击升级浏览器”）、至多两个推荐链接（
https://browsehappy.com或国内可信渠道） - 避免使用“请安装最新版 XX 浏览器”这种模糊表述——用户可能根本不知道自己在用什么浏览器，也不懂“最新版”指什么
- 浮层需支持键盘聚焦与回车触发，满足基础无障碍要求；关闭按钮要足够大，防止触屏误操作
真要兼容 IE9–10？这些坑必须提前踩
如果你确实绕不开 IE9–10（比如政务系统集成），要注意它们对 HTML5 的支持是“残缺拼凑”的：
-
requestAnimationFrame不存在，需用setTimeout模拟，但帧率不稳定，动画易卡顿；建议将游戏逻辑帧率锁在 30fps 以内 - CSS3
transform仅支持-ms-transform，且不支持transform-origin: center等高级属性，旋转缩放类效果要重写锚点逻辑 -
fetch完全不可用，必须用XMLHttpRequest，且 IE10 不支持responseType: 'json'，需手动JSON.parse(xhr.responseText) - 打包工具（如 Webpack/Vite）默认输出 ES6+ 代码，需显式配置
target: ['ie 10']并引入@babel/preset-env，否则连const都会报错
真正难的不是让代码跑起来，而是让交互体验不割裂——比如用 canvas 绘制的角色，在 IE9 里换成 SVG 后，点击热区坐标计算方式完全不同；又比如一个依赖 WebGLRenderingContext 的粒子系统，降级成 CSS 动画后，性能反而更差。这些细节没法靠通用方案解决，得按具体功能逐个验证。
