width: 100% 在移动端常失效，因浏览器强制表单控件最小宽度约130px；需配合 box-sizing: border-box、flex: 1 布局及 font-size: 16px、min-height: 44px、padding: 12px 16px 三者协同解决。
直接设 width: 100% 是最常见做法，但多数情况下它只是“看起来有效”，真正上线后在 iOS Safari 或 Android Chrome 上仍会撑破容器、出现横向滚动——问题不在写法本身，而在没处理浏览器对表单控件的隐式约束。
为什么 width: 100% 在移动端经常失效
移动浏览器（尤其是 Safari）会给 <input> 和 <select> 强加最小宽度（通常约 130px），且这个最小值不响应 width 设置。即使父 <td> 或 <div> 已缩到 80px，控件仍强行撑开，导致溢出。
- 这不是 bug，是浏览器为保障可触控性做的兜底行为
-
box-sizing: border-box必须配width: 100%，否则 padding 和 border 会额外增加宽度 - 仅对
input[type="text"]设样式，漏掉input[type="number"]或select，就会在某一行突然失效
用 Flexbox 替代 width 百分比更可靠
Flexbox 的 flex: 1 让控件“协商”可用空间，绕过浏览器硬编码的最小宽度限制，实测在 iOS 17+ 和 Android 14 上均稳定生效。
- 给表单容器加
display: flex，子元素（input、select、label）统一设flex: 1 - 避免同时写
flex: 1和width: 100%，后者会覆盖 Flex 计算逻辑 - 若需不等宽（如 label 占 30%，input 占 70%），改用
flex: 0 0 30%+flex: 0 0 70%，而非flex: 3和flex: 7
必须配合的三项基础样式
光调宽度不够，移动端触控和渲染逻辑和桌面完全不同，这三行 CSS 缺一不可：
立即学习“前端免费学习笔记（深入）”；
-
font-size: 16px：低于此值，iOS Safari 会强制缩放整个输入框，破坏布局 -
min-height: 44px：满足苹果 Human Interface Guidelines 最小触控高度，防止误点 -
padding: 12px 16px：提供足够内边距，让文字不贴边，同时撑起高度
真正卡住人的不是“怎么写”，而是忘了表单控件在移动端有独立于 CSS 的渲染规则——它既不是纯内容流元素，也不是完全受控的盒模型，得用 flex + 字号 + 高度三者合力才能驯服。
