移动端横向滚动条主因是页面被撑宽，典型原因有三：body/html未锁死、width:100%元素带padding/margin、viewport设置不全；解决须从根源阻断，而非隐藏滚动条。
移动端页面出现横向滚动条的典型原因
不是表格或 tab 滚动没关好，而是整个页面被撑宽了。最常见三种情况：body 或 html 没锁死、width: 100% 元素带 padding/margin、viewport 设置不全。
-
meta标签漏了user-scalable=no或initial-scale=1，导致 iOS Safari 自动缩放后内容溢出 - 某个
div设了width: 100vw却又加了padding: 1rem，实际宽度变成100vw + 2rem -
table-responsive容器里嵌了display: flex的子元素，flex 默认会拉伸，破坏容器边界
解决思路不是“隐藏滚动条”，而是“不让它产生”——否则键盘导航、屏幕阅读器、触屏拖拽都会受影响。
禁用全局横向滚动的最小可行配置
只改两处，就能让页面在移动端彻底拒绝横向滚动，且不影响局部滚动功能：
- 给
html, body加overflow-x: hidden，同时必须配height: 100%，否则部分安卓 WebView 会失效 - 在
里确保有完整viewport：<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
别用 overflow: hidden 直接套在 body 上——它会截断焦点流，导致键盘用户无法 Tab 到右侧弹窗或侧边栏。
如果用了 Bootstrap 5 的 table-responsive 或 nav-tabs 横向滚动，这个配置不会干扰它们，因为那些是局部 overflow-x: auto 容器，和全局 overflow-x: hidden 不冲突。
为什么 table-responsive 在手机上有滚动条，桌面却没了
这是 Bootstrap 4 和 5 的断点逻辑差异导致的误判，不是 bug。
- Bootstrap 4 的
table-responsive默认只在min-width: 768px（即平板及以上）才启用横向滚动；小屏（手机）下它强制加overflow-x: auto，所以你看到滚动条 - Bootstrap 5 的
table-responsive默认全尺寸生效；若想只在小屏滚动，得写table-responsive-sm
查清你项目用的是哪个版本：打开浏览器控制台，输入 bootstrap?.Version；或者看引入的 CSS 文件名是否含 bootstrap.min.css?v=5。
容易踩的坑：在 BS4 项目里直接复制 BS5 文档的写法，结果桌面端表格卡死、拖不动，还以为是 JS 冲突。
隐藏滚动条 ≠ 禁用横向滚动
很多人搜“禁用横向滚动”，最后却加了 ::-webkit-scrollbar { display: none }，这只会藏起滚动条视觉样式，但手指一划，页面照样横向滑出去。
真正要禁用横向滚动，必须切断触发源：
- 不要依赖
overflow-x: hidden套在某个卡片上，它只管自己，不管body - 不要用
white-space: nowrap强行防止换行，它会让长文本撑爆容器 - 移动端慎用
transform: translateX()做动画，位移后元素仍占文档流宽度，可能意外触发横向溢出
最稳的组合是：html, body { overflow-x: hidden; height: 100% } + 正确 viewport + 所有宽度相关样式用 box-sizing: border-box 统一兜底。
复杂点在于，一旦你启用了局部横向滚动（比如可滑动 tab），就得确保它的容器有明确 width 且不继承父级 flex 拉伸行为——这点很容易被忽略，直到测试时发现手指划过 tab 区域，整页跟着偏移。
