移动端横向溢出 1px 整页能左右拖

报错是这么冒出来的。移动端列表页卡片宽度写 calc(100% - 24px) 又加了 1px 边框 盒模型按 content-box 计算 整页多出 1px 出现横向滚动条 手指左右滑能晃动 移动体验提示页面可横向滚动

中间走过弯路，把「图片没有设 max-width」当成主因，改完现象没变。

这类报错背后常见的原因有几处，逐个排除就行。宽度计算没有把边框算进去 盒模型不一致。少数情况下是某个绝对定位元素超出视口。

另外，长英文串或 URL 不换行 撑开容器。

上来先用脚本找出超宽元素

document.querySelectorAll('*').forEach(e => e.scrollWidth > document.documentElement.clientWidth && console.log(e))

再往下统一盒模型并限制溢出

*, *::before, *::after { box-sizing: border-box; } html, body { overflow-x: hidden; }

图片加宽度约束

img { max-width: 100%; height: auto; }

长串强制换行

p, li { overflow-wrap: anywhere; }

命令输出我都留了记录，免得改完记不清原来的值。

恢复的判定其实很直接。移动端不再出现横向滚动条 页面宽度等于视口 体验提示消失。

1px 的溢出在桌面看不出来 移动端会被放大成整页晃动 盒模型统一是最省事的解法。如果同一现象隔几天又出现，说明根因没找到，别当偶发处理。