安卓Chrome/WebView中video元素object-fit:cover渲染偏右是因高DPR下subpixel渲染与裁剪锚点居中导致，需用JS动态计算缩放比例并手动居中校准。
HTML5 在安卓设备上渲染偏右，本质是浏览器对 object-fit、盒模型计算或缩放策略的实现差异，不是“错”，但必须手动校准。
安卓 Chrome / WebView 中 object-fit: cover 的左右偏移现象
多数偏右问题出现在设置了 width: 100% + height: 100% + object-fit: cover 的容器里。安卓 Chrome（尤其 Android 12+）在高 DPR 屏幕下会因 subpixel 渲染和裁剪锚点默认居中，导致视觉上画面右移几像素——人眼极易察觉，尤其有字幕或 UI 边框时。
- 用
getBoundingClientRect()测量发现video元素实际 left 值正常，但内部视频帧绘制区域向右偏了 1–3px - iOS Safari 和桌面 Chrome 无此现象，说明是安卓 WebKit/Blink 渲染管线特定行为
- 加
transform: translateX(0)无效；但transform: translateX(-0.5px)可能临时缓解，不推荐（模糊风险）
用 video.videoWidth / video.videoHeight 动态计算缩放比例
绕过 object-fit 的渲染不确定性，改用 JS 控制 canvas 或 CSS 缩放基准，是最稳定跨平台方案。
- 监听
loadedmetadata事件后读取video.videoWidth和video.videoHeight - 对比容器宽高比，算出实际缩放倍数：
scale = Math.max(containerWidth / video.videoWidth, containerHeight / video.videoHeight) - 设置
video.style.transform = scale(${scale})，再用video.style.left和video.style.top手动居中（注意：需设position: relative） - 务必加
will-change: transform防止重绘抖动
强制启用 contain-intrinsic-size 防止布局抖动
安卓部分 WebView 在视频加载完成前会错误计算高度，导致后续 object-fit 锚点偏移。此时仅靠 CSS 无法根治，需配合尺寸占位。
立即学习“前端免费学习笔记（深入）”；
- 给
设置style="contain-intrinsic-size: 1600x900"（填你预期最大分辨率） - 同时加
min-width: 0; min-height: 0，防止 flex/grid 容器压缩视频原始尺寸 - 若用 React/Vue，确保 ref 绑定后，在
onCanPlay阶段再动态更新contain-intrinsic-size值，避免 SSR 与 CSR 尺寸不一致
真正难处理的是混合 DPR 场景：比如折叠屏横竖切换时 DPR 从 2.8 跳到 3.5，object-fit 锚点会重新计算但不触发重排。这时候必须监听 resize 和 orientationchange，并用 window.devicePixelRatio 做二次校准——不是所有项目都需要，但金融、教育类全屏视频应用躲不开。
