漏了 user-scalable=no 会导致浏览器允许缩放，双击或手势后残留放大态，小数像素渲染误差使 grid 边缘错位出白边；应补上该参数或改用 maximum-scale=1.0 并配合 body{margin:0}、minmax() 等精度控制。
viewport content 属性漏了 user-scalable=no 会放大出白边
移动端 Chrome 或 Safari 在双击缩放、手势拉伸后，页面可能被临时放大，导致右侧或底部出现不可滚动的白边——这不是布局溢出，而是视口缩放态残留。关键在于 viewport 的 content 值没禁用用户缩放：<meta name="viewport" content="width=device-width, initial-scale=1.0"> 缺少 user-scalable=no 时，浏览器允许缩放，而缩放后的渲染精度误差（尤其是小数像素）会让 Grid 容器边缘对不齐视口边界。
修复很简单，补上即可：<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
注意：仅在明确不需要用户缩放的场景（如后台管理页、全屏应用）才加此参数；若需可访问性支持，改用 maximum-scale=1.0 更稳妥，它允许双击但禁止持续拉伸。
grid-template-columns 使用 fr 单位时，小数像素累积导致右边缘错位
Grid 中写 grid-template-columns: repeat(3, 1fr) 看似均分，但在某些安卓 WebView 或旧版 iOS Safari 中，视口宽度（如 375.33px）除以 3 后每列得到非整像素值（125.11px），渲染引擎四舍五入误差会逐列累加，最终第三列右边缘超出视口 1–2px，触发横向滚动条并露出白边。
避免方式：
• 用 minmax() 替代纯 1fr，例如 repeat(3, minmax(0, 1fr))，让浏览器有裁剪余量
• 小屏下改用 grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)))，依赖自动填充机制内部做像素对齐
• 绝对需要精确三等分时，用 grid-template-columns: 33.33% 33.33% 33.34% 手动收口（仅限固定列数且无响应需求）
gap 值为小数或 rem 单位时，在 iOS Chrome 中渲染不稳定
iOS 上的 Chrome（实为 WKWebView 封装）对 gap 的小数值（如 gap: 0.6rem 或 gap: 1.5px）解析存在浮动点误差，尤其当父容器 font-size 动态变化（如通过媒体查询切换）时，rem 计算结果波动会放大 gap 渲染偏移，造成网格项右侧“虚浮”出白边。
稳定做法：
• 优先使用整数 px 或 em（基于父元素 font-size 固定值）
• 若必须响应式，用 clamp(8px, 2.5vw, 16px) 替代 rem，避开 font-size 依赖链
• 配合 overflow-x: hidden 在 grid 容器上兜底，但仅作为保险，不能替代精度控制
body 默认 margin 没清干净就套 Grid 容器
即使写了 * { margin: 0; padding: 0; }，iOS Chrome 仍可能保留 body 的 8px 默认外边距——这是 WebKit 的顽固行为，通配符重置有时被 UA 样式表权重压制。一旦 body 有 margin，其子级 Grid 容器就算设了 width: 100vw，也会因父容器实际可用宽度 = 100vw - 16px 而向右偏移，缩放后白边更明显。
必须显式处理：
• body { margin: 0; } 单独写，不要混在通配符里
• 加 html { margin: 0; } 双保险（部分 iOS 版本会把 margin 应用到 html）
• Grid 容器上补 margin-left: calc(-1 * env(safe-area-inset-left)) 应对刘海屏额外内边距干扰
白边问题从来不是单一 CSS 属性惹的祸，而是 viewport 设置、单位精度、浏览器 UA 行为、盒模型层级这几层误差叠在一起的结果。最易忽略的是：你以为清掉了 body margin，其实没清掉；你以为 fr 是智能均分，其实它在小数像素上很脆弱。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
