capture属性无效的根本原因是浏览器仅将其视为提示而非强制指令，必须与type="file"和精确的accept值组合使用，且受https、用户手势、ua兼容性等多重限制。
capture 属性为什么点了没反应
根本原因不是代码写错，而是浏览器压根没把它当一回事——capture只是个提示，不是开关。它必须和 type="file" + 精确的 accept 组合才可能触发设备调用，缺一不可。
常见静默失效场景：
-
accept写成accept="image/jpeg"或accept="image/png"：iOS Safari 和部分 Android 会直接降级为图库选择 - 页面跑在
http://下：iOS 和 Chrome 84+ 会禁用媒体访问入口，连相册都不弹 -
input是动态插入（比如 Vue mounted 里创建、React useEffect 中 appendChild）：iOS Safari 忽略所有capture行为 - 元素被
display: none或visibility: hidden隐藏：Safari 拒绝识别该input - 用
setTimeout或Promise.then触发click()：Chrome 拒绝非用户手势上下文中的调用，无报错、无声响、无反应
哪些 capture 值真正有效
W3C 规范只认两个字符串值：user 和 environment，其他如 camera、microphone 全是历史私有扩展，已被主流浏览器废弃或忽略。
它们的语义和实际表现差异极大：
-
capture="user"：提示前置摄像头或面向用户的麦克风；iOS Safari 支持稳定，Android 行为不一 -
capture="environment"：提示后置摄像头；仅 iOS Safari 16.4+ 开始真正响应，旧版直接忽略 -
capture（无值）：由系统决定，默认倾向后置，但 iOS 上常等价于user -
accept="audio/*"时，capture值无关紧要，只要存在就尝试调起录音界面
注意：capture="environment" 在 Android Chrome 上多数生效，但在微信 X5 内核中基本无效——它连布尔形式都不解析。
安卓机型兼容性差的根本原因
不是你代码有问题，而是安卓碎片化太严重：厂商 WebView、X5 内核、旧版 Chrome 对 capture 的支持程度天差地别。
典型问题：
- 加了
multiple属性 → 所有安卓几乎立刻退化为图库选择 -
accept="image/*;capture=camera"这种非标写法曾短暂被某些国产 ROM 支持，但现在 Chrome 已不认 - 部分 Samsung Internet、华为浏览器对
capture="environment"完全无视，始终打开前置 - 微信 Android 版（X5 内核）不响应任何
capture值，也不触发getUserMedia
实操建议：运行时检测 UA，对微信和老安卓主动移除 capture，改用文字引导：“请打开相机拍照后上传”。
什么时候该放弃 capture，改用 getUserMedia
当你需要以下任一能力时，capture 就不该再作为主力方案：
- 实时预览画面（
capture只能拍完再传） - 手动切换前后置镜头（
{ facingMode: "environment" }） - 控制曝光、聚焦、闪光灯
- 绕过系统相册入口，实现“点开即拍”
但要注意：navigator.mediaDevices.getUserMedia 同样受制于 HTTPS、用户手势、权限状态。它不能解决微信内嵌浏览器的限制，也不能自动处理 iOS 拍照后的 EXIF 方向旋转问题——这些都得自己补。
真正难的不是写对 capture="environment"，而是判断当前环境是否值得信任它。多数上线项目最终都会 fallback 到 UA 检测 + 引导文案，而不是强依赖这个属性。
