capture属性仅为提示而非强制指令，需满足https、ios 16.4+、accept="image/*"、静态dom、非隐藏元素等硬性条件才可能生效；否则退化为相册选择，微信及旧版ios中普遍失效。
capture 属性不是“点了就开摄像头”的开关，而是告诉浏览器：“请优先调用原生相机界面”，但能否生效、调哪个镜头、弹出什么选项，全看环境是否满足硬性条件。多数线上项目最终都得 fallback 到 UA 检测 + 引导文案，而不是强依赖它。
为什么 capture="environment" 在 iOS 上没反应
iOS Safari 16.4+ 才真正识别 capture="environment" 或 capture="user"；低于该版本时，整个 capture 属性会被静默忽略， 行为退化为普通 accept="image/*" —— 只弹相册，不弹拍照入口。
- 必须 HTTPS：HTTP 页面下 iOS Safari 直接禁用摄像头入口，连相册都可能不弹
- 必须初始渲染：不能用
innerHTML、appendChild或 Vue/React 的mounted动态插入，否则 Safari 无视capture - 不能包裹在
display: none或visibility: hidden元素里——Safari 会跳过该 - 别写
capture="camera"：这不是标准值，iOS 完全不认；Android 厂商私有扩展已基本废弃
Android 上 capture="environment" 为何还是调前置
Android 行为更“宽松”但也更不可控：capture="environment" 可能被厂商固件忽略，最终仍打开前置；而一个常见误操作会让它彻底退化为文件选择器。
-
accept必须是通配符形式：accept="image/*"✅；accept="image/jpeg"❌（部分 Android 会直接禁用相机入口） - 绝对不要加
multiple：<input type="file" accept="image/*" capture="environment" multiple>会导致几乎所有 Android 系统放弃调用摄像头，直进图库 - HTTPS 不是强制但建议：某些 Android 版本（如 Chrome 115+）在非安全上下文也会拒绝
capture
微信内置浏览器中 capture 完全失效怎么办
微信 iOS 版（基于 WKWebView）长期禁用 capture，连 getUserMedia() 都受限；Android 微信 X5 内核也基本不响应。此时硬写 capture 等于白搭。
- 运行时检测 UA：
navigator.userAgent.includes("MicroMessenger")，命中则移除capture属性，改用文字引导：“请打开相机 App 拍照后上传” - 对老 iOS（
/OS [1-9][0-5]_/.test(navigator.userAgent)）同样建议降级处理 - 真要可控拍摄，只能上
MediaDevices.getUserMedia()+canvas截图方案，但需自行处理权限拒绝、横竖屏旋转、EXIF 方向等细节
capture 生效的前提条件有哪些
capture 属性只在特定组合下才可能触发原生相机界面，缺一不可：
- 必须
type="file"，且accept明确指定图像或视频 MIME 类型：accept="image/*"或accept="video/*"✅；accept="*"或accept="/"❌ - iOS 要求
accept不能带参数，如image/jpeg；Android 相对宽松，但accept="image/png"仍可能回退到文件选择器 - 必须在真实移动端环境测试：Chrome DevTools 的 Device Mode 下点击
<input>只会弹文件选择器，不会启动摄像头 - 页面需获得用户授权（首次使用会弹 prompt，若用户点“拒绝”，后续需手动进系统设置开启）
真正难的不是写对那一行 capture="environment"，而是判断当前环境是否值得信任它——比如用户用的是微信、刚升级完 iOS、或者正通过 HTTP 访问页面。这些边界情况，靠一行属性解决不了，得靠 UA 检测、显式 click 触发、label 包裹、以及清晰的用户引导来兜底。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
