`aspectratio` 约束在移动端浏览器（尤其是 ios safari 和部分 android 浏览器）中普遍不被支持或被忽略，因其底层摄像头硬件限制；实际可行方案是通过显式指定 `width`/`height` 范围约束替代，并结合设备方向与分辨率适配策略。
在 Web 视频录制场景中，开发者常期望通过 MediaTrackConstraints 的 aspectRatio 属性（如 9 / 16）强制设定竖屏录制比例。然而，该属性在绝大多数移动浏览器中属于“建议性约束”（not enforced），而非硬性要求。根据 MDN 官方文档 和实测验证，aspectRatio 在 ios safari、旧版 chrome for android 及部分厂商定制浏览器中完全被忽略——原因在于：
- 移动设备摄像头固件通常仅支持有限的原生分辨率（如 720p、1080p、4K），且多为固定宽高比（如 4:3 或 16:9），无法动态裁切或缩放以满足任意 aspectRatio；
- getUserMedia() 接口将约束传递至系统媒体层后，若无匹配输出格式，浏览器会退回到最接近的可用配置，而不报错也不警告；
- 设备旋转会动态改变可用约束集（例如竖屏时 width
✅ 推荐解决方案：用 width/height 范围约束替代 aspectRatio
针对 9:16 竖屏录制（即常见手机全屏竖拍），应明确指定高度优先的分辨率区间，例如：
const videoConstraints = { width: { min: 360, ideal: 720, max: 1440 }, height: { min: 640, ideal: 1280, max: 2560 }, facingMode: 'user' };✅ 关键点说明：min/max 提供兼容边界，ideal 引导浏览器优先选择目标比例（720×1280 = 9:16）；高度值显著大于宽度，明确传达“竖屏意图”，避免横屏设备误选 16:9 模式；实际采集分辨率仍由设备决定，但此方式比 aspectRatio 更易触发匹配（尤其在 Android Chrome 中）。
? 进阶建议：运行时校验与降级处理
获取流后，应主动检查实际轨道尺寸，确保符合预期：
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); // 若宽高比偏差 >5%，可提示用户或尝试重新请求（需先 stop()） const actualRatio = settings.width / settings.height; if (Math.abs(actualRatio - 9/16) > 0.05) { console.warn('Warning: Actual aspect ratio differs from expected 9:16'); // 可选：触发 UI 提示或自动切换约束重试 } });⚠️ 注意事项与避坑指南
- 不要依赖 aspectRatio 在移动端生效，它在 CanIUse 中明确标注为「部分支持」且行为不一致；
- iOS Safari 对 ideal 值支持较弱，建议 min/max 范围不宜过宽（避免触发低质分辨率）；
- 某些 Android 设备需同时设置 frameRate（如 { min: 24, max: 30 }）才能激活更高分辨率选项；
- 若需绝对一致的输出比例，前端裁剪 + css Object-fit: cover + 后端转码 是更可靠的端到端方案。
总之，移动端视频约束的本质是“协商而非强制”。通过 width/height 显式建模目标比例、配合运行时校验与优雅降级，才能在真实设备上达成稳定、可预期的录制体验。