React-QR-Reader 中 videoStyle 设置的宽高常无法真实约束视频流尺寸，导致扫码区域与实际摄像头输出比例失配，尤其在移动端易出现拉伸、裁剪或黑边；根本原因在于浏览器对 元素的固有行为及媒体流分辨率优先级高于 CSS 样式。

react-qr-reader 中 `videostyle` 设置的宽高常无法真实约束视频流尺寸，导致扫码区域与实际摄像头输出比例失配，尤其在移动端易出现拉伸、裁剪或黑边；根本原因在于浏览器对 `

在使用 react-qr-reader（注意：当前主流维护版本为 @blackbox-vision/react-qr-reader 或社区推荐替代方案 react-webcam + jsQR）时，直接通过 videoStyle={{ width: 300, height: 300 }} 强制设置

✅ 正确做法是 “容器约束 + object-fit 控制缩放” + “constraints 指定理想分辨率”：

React Best Practices 2 0.1.0

React 与 Next.js 性能优化指南，源自 Vercel 工程团队。适用于编写、审查或重构 React/Next.js 代码时使用。

下载

<qrreader scandelay="{500}" onresult="{handleScan}" viewfinder="{scanOverlay}" containerstyle="{{" width: height: position: overflow: videostyle="{{" objectfit: border: solid bordercolor: qrdata.length="==" : constraints="{{" facingmode: ideal:></qrreader>

? 关键要点说明：

• objectFit: 'cover' 是核心：确保视频流按原始宽高比缩放并覆盖整个容器，避免变形；
• 容器（containerStyle）应设为明确宽高+overflow: hidden，防止溢出；
• videoStyle.width/height 改用 '100%'，交由 CSS 布局控制，而非固定像素值；
• constraints 中添加 width/height 理想值，可提升获取合适分辨率的概率（但不强制，取决于设备支持）；
• ⚠️ 注意：旧版 react-qr-reader@2.x 已停止维护，存在兼容性问题；建议升级至现代替代方案，例如：

npm uninstall react-qr-reader
npm install @blackbox-vision/react-qr-reader
# 或更轻量可控的组合：
npm install react-webcam jsqr

最后，务必在真机（尤其 iOS Safari）测试——部分浏览器对 facingMode: 'environment' 和 object-fit 的支持存在差异，必要时可增加 transform: scaleX(-1) 修复镜像翻转问题。稳定识别的前提，永远是清晰、无畸变、比例正确的视频输入。