本文详解如何修复原计算器中输入字段在移动端水平溢出的问题，核心是为表单控件设置相对宽度（百分比）并配合媒体查询优化布局，确保上下两张表格均能在小屏设备上完整、易用地显示。
本文详解如何修复原计算器中输入字段在移动端水平溢出的问题，核心是为表单控件设置相对宽度（百分比）并配合媒体查询优化布局，确保上下两张表格均能在小屏设备上完整、易用地显示。
在当前的 GPA 计算器实现中，尽管整体容器（.calculator-container）和表格（table）已通过 max-width 和 width: 100% 做了基础响应式处理，但关键问题在于：表单控件（<input> 和 <select>）默认采用浏览器设定的固有宽度（如 130px–200px），未随父容器缩放。这导致在窄屏（尤其是手机竖屏）下，单行表格内容超出视口，触发不必要的水平滚动——而下方仅展示数据的“成绩表”因无交互控件，反而表现正常。
要根本解决此问题，需对所有用户可编辑的表单元素实施流体宽度控制，并辅以合理的垂直间距与触摸友好设计。以下是经过验证的完整优化方案：
✅ 关键修改：为输入控件添加响应式宽度
首先，在 HTML 中为所有输入控件添加语义化类名（便于统一管理）：
<!-- 在 courseTable 的 <tbody> 中，修改每一行的输入字段 -->
<td><input type="text" class="form-input" required></td>
<td><input type="number" value="1" min="1" class="form-input" required></td>
<td>
<select class="form-select">
<!-- 选项保持不变 -->
</select>
</td>接着，在 <style> 区域中新增或更新 CSS 规则（推荐置于媒体查询内部，避免影响桌面端体验）：
/* 桌面端保持默认宽度（可选） */
.form-input,
.form-select {
width: 100%;
box-sizing: border-box; /* 确保 padding/border 不撑宽 */
margin: 0;
}
/* 移动端增强：缩小内边距 + 统一字体大小 */
@media (max-width: 768px) {
.form-input,
.form-select {
padding: 8px 10px; /* 更适合手指点击 */
font-size: 14px;
}
/* 防止 select 在 iOS 上过宽（部分旧版 Safari 需要） */
.form-select {
min-width: 80px;
}
/* 可选：为“Add Course”等按钮增加底部间距 */
#addCourseButton,
#calculateButton {
margin: 12px 0 8px;
}
}? 为什么用 width: 100% 而非固定像素？
百分比宽度使控件始终占据其 <td> 的全部可用空间；而 <td> 本身在 table { width: 100% } 下会随容器自适应。这形成完整的响应式链路——屏幕越窄，单元格越窄，输入框随之收缩，彻底消除横向溢出。
✅ 进阶优化：提升移动端操作体验
- 移除冗余空白列：原表格末列 <td></td> 为空，却占用空间。建议删除或替换为带明确功能的图标列（如“删除”按钮），并为其设置 white-space: nowrap 防止换行破坏布局。
- 增强触摸目标尺寸：根据 WCAG 2.1 建议，确保可点击区域 ≥ 44×44px。上述 padding: 8px 10px 结合默认 font-size: 14px，已使多数输入框高度超过 44px。
- 动态调整行高：在移动端媒体查询中，可增加 line-height: 1.5 到 th, td，改善文字可读性。
✅ 完整验证示例（精简版 CSS 片段）
将以下代码插入原 <style> 标签末尾即可生效：
/* 响应式表单控件基础样式 */
.form-input,
.form-select {
width: 100%;
box-sizing: border-box;
margin: 0;
border: 1px solid #ccc;
border-radius: 4px;
padding: 8px 10px;
font-size: 14px;
}
@media (max-width: 768px) {
.form-input,
.form-select {
padding: 10px;
}
/* 确保表格单元格不压缩内容 */
td {
vertical-align: middle;
}
}⚠️ 注意事项
- 避免 !important：不要为 .form-input 添加 !important，否则可能干扰 JavaScript 动态样式（如焦点状态）。
- 测试真实设备：Chrome DevTools 的模拟器仅作参考，务必在真机（iOS Safari / Android Chrome）上验证滚动行为与点击精度。
- 兼容性兜底：如需支持 IE11，需额外添加 -ms-flex 相关前缀（但现代项目通常无需）。
通过以上修改，您的 GPA 计算器上半部分输入表格将与下半部分成绩表一样，在各类智能手机上实现真正的“一屏可见、无需横滑、触控友好”。响应式不是简单加个 viewport，而是从容器、表格、单元格到每一个输入框的逐层适配——这才是专业前端实践的核心逻辑。
