capture="environment" 在 ios safari 上无效，因其不解析该属性语义，始终调用系统默认相机（前置+相册）；android 行为不统一，依赖 accept="image/*"、无 multiple 等条件；唯一可靠方案是 getusermedia() 配 facingmode: 'environment'。
不能保证默认调后置，capture="environment" 只是提示，不是指令。iOS Safari 完全忽略它，Android 行为也不统一——别把它当开关用。
为什么 capture="environment" 在 iOS 上无效
iOS Safari（截至 17.6）不解析 capture="environment" 的语义，无论你写什么值，最终都走系统统一媒体选择器，默认前置+相册入口。这不是 bug，是 Apple 的设计策略：系统级相机 UI 不暴露镜头切换控制权给网页。
-
capture="user"和capture="environment"在 iOS 上表现几乎一样 - 即使加了
accept="image/*"，Safari 仍会显示“拍照”“从相册选取”两个选项，且“拍照”默认用前置 - HTTPS、用户手势、PWA 添加到主屏幕等条件满足后，也改变不了这个行为
Android 上 capture="environment" 为何经常 fallback 到前置
Android 浏览器（尤其是 Chrome 120+）对 capture="environment" 的支持更积极，但实际是否调后置，取决于三件事：
-
accept必须是通配符形式：accept="image/*"✅；accept="image/jpeg"❌（部分厂商 ROM 会直接禁用相机入口） - 不能带
multiple属性：<input type="file" accept="image/*" capture="environment" multiple>→ 99% 退化为图库选择 - 微信内置浏览器（X5 内核）完全不识别
capture属性，哪怕写成capture="environment"也当没写
真想默认后置？绕过 capture，用 getUserMedia()
唯一可控方案是放弃表单式调起，改用 WebRTC 自建预览流：
async function startBackCamera() {
try {
const stream = await navigator.mediaDevices.getUserMedia({
video: { facingMode: 'environment' }
});
videoElement.srcObject = stream;
} catch (err) {
// err.name 可能是 'NotAllowedError'（权限拒绝）或 'NotFoundError'（无后置摄像头）
console.error('后置摄像头不可用:', err.name);
}
}
-
facingMode: 'environment'是标准 MediaStreamConstraints，比capture层级更高、兼容性更好（Chrome Android / Firefox / Safari 16.4+ 支持） - 需手动实现拍照逻辑（
canvas.getContext('2d').drawImage(video, ...)），不能直接拿到File - 首次调用必须由用户手势触发（如 button click），否则会被浏览器拦截
别踩的坑：无效写法和静默降级
这些写法看似合理，实则毫无效果：
-
capture="camera"或capture="front"—— 非标准值，所有现代浏览器忽略 -
<input type="camera">—— 标签不存在，HTML 解析失败 - HTTP 环境下使用
capture—— 大多数浏览器直接降级为文件选择器，不报错也不提醒 - 在
setTimeout或fetch.then()中调用input.click()—— 浏览器判定非用户手势，拒绝激活摄像头
真正起作用的从来不是 capture 值本身，而是 type="file" + accept="image/*" + HTTPS + 用户点击这四要素组合。把 capture="environment" 当成“尽力而为”的提示就好，别让它承担控制责任。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
