`aspectratio` 约束在移动端浏览器（尤其是 ios safari 和部分 android 浏览器）中普遍不被支持或仅作参考，实际采集分辨率由硬件决定；需改用 `width`/`height` 范围约束组合 + 后续裁剪/缩放策略来逼近目标比例。
HTML5 的 MediaTrackConstraints 中的 aspectRatio 属性虽在桌面 Chrome 等现代浏览器中表现良好，但在绝大多数移动浏览器（包括 iOS Safari、Android Chrome 旧版本、Samsung Internet 等）中不被真正实现——它会被静默忽略，或仅作为启发式提示，无法强制设备输出指定宽高比的视频流。
这是因为移动设备摄像头固件通常只支持有限的原生分辨率档位（如 720×1280、1080×1920），且其宽高比（如 9:16、4:3、16:9）由传感器物理布局和驱动层锁定，Web API 无法绕过底层限制。此外，设备旋转会动态改变可用约束集（例如竖屏时 facingMode: 'user' 可能仅提供 9:16 候选，横屏时则倾向 16:9），进一步加剧不确定性。
✅ 推荐解决方案：用 width/height 范围约束替代 aspectRatio
const videoConstraints = {
width: { min: 360, ideal: 720, max: 1440 },
height: { min: 640, ideal: 1280, max: 2560 },
facingMode: 'user'
};该配置明确引导浏览器优先选择接近 9:16（即 720×1280、1080×1920 等）的分辨率，比模糊的 aspectRatio: 0.5625 更具兼容性。注意：
- ideal 值应严格对应目标比例（如 9:16 → ideal: 720 / 1280 → 宽设 720、高设 1280）；
- min/max 需覆盖主流设备能力（如 iPhone 12+ 支持 1080×1920，中端安卓常支持 720×1280）；
- 避免设置过窄的范围（如 width: 720 单值），易导致 gUM 拒绝请求。
? 验证实际获取的流分辨率
调用 getUserMedia() 后，务必检查返回轨道的实际参数，而非假设约束生效：
navigator.mediaDevices.getUserMedia({ video: videoConstraints })
.then(stream => {
const track = stream.getVideoTracks()[0];
const settings = track.getSettings();
console.log('Actual resolution:', settings.width, 'x', settings.height);
console.log('Actual aspect ratio:', (settings.width / settings.height).toFixed(4));
// 若非预期比例，可触发降级逻辑（如 CSS 裁剪、Canvas 重采样）
});?️ 补充保障策略
- CSS 层面控制显示比例：用 object-fit: cover + 固定容器宽高比（如 aspect-ratio: 9/16 或 padding-top: 177.77%）确保预览视觉一致；
- 录制后处理（可选）：若需精确 9:16 输出，可在 MediaRecorder 录制后通过 Canvas 裁剪/缩放帧，或使用 WebAssembly 视频编码库（如 FFmpeg.wasm）进行转码；
- 降级提示：对不支持理想分辨率的设备，友好提示“竖屏拍摄效果更佳”，引导用户手动调整姿势。
总之，移动端视频约束的本质是“协商”而非“指令”。放弃对 aspectRatio 的强依赖，转向 width/height 显式范围 + 运行时校验 + 视觉/逻辑兜底，才是构建跨平台稳定视频采集功能的务实路径。
