避免移动端横向滚动条的关键是定位并约束撑宽元素，而非掩盖问题：用DevTools比对body宽度与window.innerWidth，加outline高亮超宽元素，重点检查img、table、absolute/fixed元素及white-space:nowrap容器，并全局重置box-sizing:border-box、html/body margin/padding为0且overflow-x:hidden。
避免移动端横向滚动条，关键不是“藏起来”，而是找到并收住那个悄悄撑宽的元素。它通常藏在图片、表格、绝对定位块或带 nowrap 的文本容器里，而不是 layout 本身出错。
先定位溢出源，别急着加 overflow-x: hidden
加 overflow-x: hidden 到 body 或 html 上，只是盖住问题，不是解决它。真正有效的方法是快速揪出谁“画出去”了：
- 打开 DevTools → 切到「设备模拟器」→ 选中
<body>，看右侧「Computed」里的 width 是否大于window.innerWidth - 控制台运行：
getComputedStyle(document.body).width和window.innerWidth对比，差值 >1px 就有溢出 - 临时加全局 outline：
* { outline: 1px solid red !important; }，一眼看出哪个框伸到了视口外
重点盯这四类高危元素
90% 的横向溢出来自以下几类，按优先级检查：
-
图片/视频/iframe：没设
max-width: 100%; height: auto;，原始尺寸直接撑破容器 -
表格（<table>）：必须包在
<div class="table-responsive">里，并给 table 加display: block;，父容器设明确width或max-width，禁用width: 100% -
absolute/fixed 元素：left/right 值过大，或没配合
transform: translateX()控制边界；检查是否脱离文档流后仍占水平空间 -
white-space: nowrap 容器：里面放了块级元素（如 div），又没设
display: inline-block或display: inline-flex，导致换行失效、宽度失控
基础样式必须一步到位
很多溢出其实是默认行为叠加出来的，这几项要全局写死：
立即学习“前端免费学习笔记（深入）”；
-
* { box-sizing: border-box; }—— 否则width: 100%+padding必然超宽 -
html, body { margin: 0; padding: 0; }—— 浏览器默认 body 有 8px margin，窄屏下直接触发滚动 -
html, body { overflow-x: hidden; }—— iOS Safari 要求两者都设，单设 body 会透出 - Flex/Grid 容器中内容撑宽？给子项加
min-width: 0;（flex）或min-inline-size: 0;（grid）
响应式内容自身也要“可压缩”
文字、卡片、列表这些常被忽略的区域，也容易因排版刚性导致溢出：
- 长英文或混合文本：用
word-break: break-word;或overflow-wrap: break-word; - 禁用
white-space: nowrap，除非明确需要；若必须用，内部子元素需显式设display: inline-block - 卡片/列表项的
padding和font-size在小屏下要用媒体查询缩放，比如@media (max-width: 768px) { padding: 0.5rem 0.75rem; font-size: 1.1rem; }
