capture属性在Chrome 96+、Safari 16.4+、微信iOS/Android（WKWebView/X5）、华为/小米新版浏览器中均会静默降级至文件选择器；检测应优先运行时调用navigator.mediaDevices?.getUserMedia，失败后fallback至<input type="file" accept="image/*">。
capture属性在哪些浏览器里会静默降级
Chrome 96+ 和 Safari 16.4+ 都已不再响应 capture 属性，点击后直接弹文件选择器（含相册、iCloud 等），控制台无报错——这不是 bug，是标准层面的移除。微信 iOS（WKWebView）和 Android X5 内核完全忽略该属性；部分国产安卓浏览器（如华为、小米自带浏览器）只在极旧版本中识别 capture="user"，新版也已 fallback。
怎么检测并自动降级到 getUserMedia()
别靠 UA 字符串硬匹配，用运行时能力检测更可靠：
- 先检查
navigator.mediaDevices?.getUserMedia是否存在且可调用 - 再尝试
await navigator.mediaDevices.getUserMedia({ video: true })，捕获NotAllowedError或NotFoundError - 失败后再渲染
<input type="file" accept="image/*">（不带capture）
注意：iOS Safari 对 getUserMedia() 要求 HTTPS + 用户手势触发，所以降级逻辑必须放在 button 的 click 回调里，不能提前执行。
降级时 input 元素怎么写才不踩坑
即使 fallback 到 input，也要避开常见失效点：
立即学习“前端免费学习笔记（深入）”；
-
accept必须是image/*，不能写image/jpeg或image/png，否则 Android 多数版本直接跳过相机入口 - 不要加
multiple，<input multiple>会让所有主流安卓系统放弃调起摄像头 - 元素不能是
display: none，iOS Safari 会跳过；改用position: absolute; left: -9999px或visibility: hidden - 触发
click()必须在用户真实触摸/点击回调内，不能从setTimeout或Promise.then中调用
微信里 capture 完全失效怎么办
微信内置浏览器（iOS WKWebView / Android X5）既不支持 capture，也限制 getUserMedia() 权限。此时唯一可行路径是：
- 用
navigator.userAgent.includes("MicroMessenger")检测微信环境 - 直接隐藏摄像头相关 UI，显示引导文案：“请打开相机 App 拍照，再从相册上传”
- 如果业务强依赖扫码，建议引导用户使用 Safari 或 Chrome 打开，或转为 PWA 添加到主屏幕（iOS Safari 对 PWA 的媒体权限更宽松）
真要绕过微信限制，得上原生 SDK 或小程序方案，纯 Web 页面无解。
