移动端页面宽度溢出无法定位原因求前端排查思路

安全阿岳

2026-10-19

排查方向

检查页面头部是否添加了正确的viewport适配标签，缺少该标签会导致移动端默认按PC端宽度渲染页面，直接出现整体宽度溢出。
检查表格的table-layout属性，默认值为auto时会根据单元格内容自动计算宽度，长文本不折行就会撑宽表格，超出移动端视口宽度。
检查td/th是否设置了强制不换行的white-space: nowrap属性，或者没有配置断词规则，长句无法换行直接撑宽单元格。
检查表格的父容器是否设置了横向溢出处理，未做处理时超宽表格会直接撑开整个页面的宽度。
检查单元格的padding、边框总宽度，叠加后是否超过了小屏视口的总宽度。

修复方案

先在页面head标签中添加移动端适配基础标签：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

给表格外层的包裹容器添加横向滚动属性，避免表格撑开整页：

/* 你现有代码里表格最后有个闭合的div，给这个div加类名table-wrapper即可 */
.table-wrapper {
  overflow-x: auto;
  width: 100%;
  -webkit-overflow-scrolling: touch; /* 优化iOS端滚动流畅度 */
}

补充表格相关的适配样式，可二选一：

方案A：强制表格适配屏幕宽度，内容自动折行

.table1 {
  width: 100%;
  table-layout: fixed; /* 强制按设定比例分配列宽，不会被内容撑宽 */
  border-collapse: collapse;
}
/* 根据需求调整列宽比例，以下为示例 */
.table1 th:nth-child(1), .table1 td:nth-child(1) {
  width: 20%;
}
.table1 th:nth-child(2), .table1 td:nth-child(2),
.table1 th:nth-child(3), .table1 td:nth-child(3) {
  width: 40%;
}
.table1 td, .table1 th {
  word-wrap: break-word;
  word-break: break-all;
  white-space: normal;
}