CSS Grid 是定位图像最稳方案，但需规避老 Android WebView 兼容问题，用 @supports 检测降级 Flexbox，注意 viewport、单位联动及微信内核加载时序。
用 CSS Grid 定位图像最稳，但得避开老 Android WebView 的坑
现代跨平台场景下，display: grid 是定位图像（比如九宫格头像、商品图阵列）最可靠的方式——它不依赖浮动或绝对定位，天然支持等分布局、对齐控制和响应式断点。但要注意：Android 4.4 及更早的系统 WebView 不支持 Grid，部分微信内嵌 X5 内核（v6.x 以下）也存在解析异常。
- 稳妥写法是先用
@supports (display: grid)做特性检测，降级到 Flexbox - 避免用
grid-area或命名线（如grid-column: header），改用数字坐标（grid-column: 1 / -1）提升兼容性 - 图像容器必须设
width和height，否则 Grid 在 Safari 15.4 之前可能塌陷
Flexbox 作为兜底方案，别乱用 align-items: stretch
当 Grid 不可用时，Flexbox 是最成熟的替代。但很多开发者忽略一个关键细节：align-items: stretch（默认值）会让图像高度被拉满，导致变形——尤其在 iOS Safari 中，img 的 max-width: 100% 有时失效。
- 显式设置
align-items: flex-start或center，再配合object-fit: cover控制图像裁剪 - 避免对
img直接设flex: 1，应包裹一层div并设flex-basis，防止安卓 Chrome 80 以下版本计算错误 - 横向九宫格用
flex-wrap: wrap+justify-content: space-between，但需加margin-right: 0修复最后一行右间距 bug
viewport 和图片单位必须联动，否则高清屏上位置全偏
图像位置“看起来不准”，90% 是因为 viewport 设置和尺寸单位没对齐。移动端浏览器默认缩放会把逻辑像素（CSS px）映射成多个物理像素，而图像若用固定 px 定位，在 iPhone 12+ 或安卓 2K 屏上就会错位。
- 强制声明
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">，禁用双击缩放干扰布局 - 图像容器宽高优先用
vw（如width: 30vw）或rem（配合 JS 动态设document.documentElement.style.fontSize） - 慎用
%单位——父容器若未设height，子元素height: 50%在 Safari 中常为 0
微信/QQ 内嵌浏览器要单独处理图片加载时机
在微信中，img 的 load 事件可能不触发，或触发过早（DOM 渲染未完成），导致用 JS 计算位置（如居中偏移）失败。这不是代码问题，而是 X5 内核的资源调度机制。
立即学习“前端免费学习笔记（深入）”；
- 改用
IntersectionObserver监听图像进入视口，再执行位置修正逻辑 - 对关键定位图像，加
loading="eager"防止懒加载干扰初始布局 - 避免在
DOMContentLoaded里直接读取offsetTop，应延迟到requestAnimationFrame第二帧再取值
