本文详解如何修复计算器上表单区域在手机端水平溢出的问题，核心是为输入控件设置基于百分比的自适应宽度，并配合现代响应式策略提升整体体验。

本文详解如何修复计算器上表单区域在手机端水平溢出的问题，核心是为输入控件设置基于百分比的自适应宽度，并配合现代响应式策略提升整体体验。

在移动端浏览网页时，表格内容横向滚动（horizontal scroll）通常是响应式失效的典型信号——尤其当问题仅出现在含表单控件（如 和 ）的上层表格中，而下层只读表格却表现正常时，基本可定位到表单元素未约束宽度这一根本原因。

原代码中，所有 和 元素均未显式设置 width，浏览器默认按其内部内容（如字体、内边距、浏览器 UA 样式）渲染固定宽度，在小屏幕下极易超出父容器（），导致整行被“撑开”，触发横向滚动条。

✅ 正确解法：百分比宽度 + 弹性布局增强

只需两步即可高效解决：

1. 为关键表单元素添加语义化类名（HTML 层）

<!-- 在 courseTable 的 <tbody> 中，修改所有 input/select -->
<td><input type="text" class="form-control" required></td>
<td><input type="number" value="1" min="1" class="form-control" required></td>
<td>
  <select class="form-control">
    <option value="4.0">A</option>
    <option value="3.7">A-</option>
    <!-- ...其余选项保持不变 -->
  </select>
</td>

? 建议使用 form-control 而非 input，更符合语义且便于后续扩展（如统一禁用状态、错误样式等）。

2. 在 CSS 中强制弹性宽度（CSS 层）

/* 添加到现有 <style> 块中 */
.form-control {
  width: 100%;
  box-sizing: border-box; /* 关键！确保 padding/border 不额外增加宽度 */
  margin: 0;
  padding: 6px 8px; /* 适配小屏的紧凑内边距 */
  font-size: 14px;
}

/* 针对移动端进一步优化：防止 iOS Safari 自动缩放 */
@media (max-width: 768px) {
  .form-control {
    font-size: 15px; /* 略微增大以提升触控可点击性 */
    padding: 8px;     /* 触控目标最小建议尺寸 44px × 44px */
  }

  /* 可选：为 select 添加统一高度，避免安卓/IOS 渲染差异 */
  select.form-control {
    appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23333' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 8px center;
    background-size: 16px;
  }
}

✅ 补充关键优化项（强烈推荐）

优化点	说明	代码示例
box-sizing: border-box	防止 padding 和 border 导致实际宽度 > 100%	已包含在 .form-control 中
移除 td:before 隐藏逻辑	原 CSS 中 td:before { display: none } 无对应伪元素，属冗余代码，应删除	删除该规则行
为按钮添加响应式间距	避免按钮在窄屏上挤在一起	css #addCourseButton, #calculateButton { width: 48%; margin: 4px 1%; }
启用 viewport 完整支持	确保 initial-scale=1.0 生效	原 已正确，无需改动

? 实际效果验证

• ✅ 智能手机竖屏下：输入框自动填满单元格宽度，无水平滚动；
• ✅ 横屏或平板：平滑过渡，保持可用性与可读性；
• ✅ 所有主流浏览器（Chrome、Safari、Firefox Mobile）兼容良好。

⚠️ 注意事项

• 切勿使用 width: 100vw：会导致因滚动条宽度计算偏差而溢出；
• 避免 min-width 固定值：如 min-width: 120px 会破坏响应式行为；

在 iOS 上默认高度较高：通过 appearance: none + 自定义箭头可统一视觉并提升控制精度；

若未来需支持更多课程行，建议为 #courseTable 添加 overflow-x: auto 并包裹 div，但当前优化后通常已无需此退路。

通过以上结构化调整，你的 GPA 计算器将真正实现「一处编写，多端自适应」——不仅解决横向滚动痛点，更奠定专业级 Web 表单的响应式基础。