移动端表单输入体验差主因是input未被真正“驯服”：iOS Safari隐式min-width约150px使width:100%失效，Android对padding/line-height敏感，flex容器中易错位截断；须统一box-sizing:border-box、显式min-width:0、避免外层padding、默认flex-direction:column、font-size≥16px、min-height:44px、textarea禁水平resize、button加flex-shrink:0，并用focus时scrollIntoView应对键盘遮挡。
移动端表单输入体验差，八成不是媒体查询没写，而是 input 没被真正“驯服”：iOS Safari 默认施加约 150px 隐式最小宽度，width: 100% 压不住；Android 对 padding 和 line-height 更敏感；所有这些，在 flex 容器里会被放大成错位、截断、点击失焦。
为什么 width: 100% 在手机上经常失效
浏览器默认用 box-sizing: content-box，此时 width: 100% 只算内容区，加上 padding 和 border 就必然溢出父容器。更麻烦的是，input 元素在 Safari 中还自带隐式 min-width，哪怕你写了 width: 100%，它也优先守着那个 120–150px 的底线。
- 必须给所有表单控件统一加
box-sizing: border-box -
input、select、textarea必须显式设min-width: 0，这是让width: 100%生效的前提 - 避免对包裹
div设padding后再让子input写width: 100%——应把padding移到控件自身，或用calc(100% - 2rem)补偿 -
fieldset和legend有默认margin和border，不重置会干扰整体宽度计算
flex-direction: column 必须默认启用，别等媒体查询
在小屏上硬用 flex-direction: row 是自找麻烦。即使加了 flex-wrap: wrap，input 的隐式最小宽仍会让换行不可控。直接默认竖排，语义清晰、触控友好、焦点流自然。
- 外层容器（如
.form-row）初始就设display: flex; flex-direction: column; gap: 12px - 桌面端用
@media (min-width: 768px)覆盖为row，并给label加min-width: 120px防撑开 - 别用
align-items: center——input和label的基线不同，视觉上必然错位；改用flex-start顶部对齐更稳 - 若需单个字段内水平对齐（如复选框+文字），应在该字段内部用
display: flex; align-items: center，而非全局设
触控区域与字体大小是硬约束，不是可选项
iOS 和 Android 都会对 font-size < 16px 的 input 主动缩放，破坏布局；Safari 还会忽略 user-scalable=no。这不是 bug，是系统级防护机制。
立即学习“前端免费学习笔记（深入）”；
- 所有表单控件强制设
font-size: 16px或更大 - 用
min-height: 44px+padding替代单纯调height，确保触控目标达标且文字不被截 -
textarea必须设min-height和resize: vertical，禁用水平拉伸 -
button和input[type="submit"]必须加flex-shrink: 0，否则在窄屏下会被 flex 压扁变形
键盘弹起时表单被遮住，CSS 无解
媒体查询查不到软键盘高度，flex-wrap 更无能为力。这是 WebView / Safari 的 viewport 缩放行为问题，和 CSS 布局无关。
- 轻量级应对：给每个
input绑focus事件，调用scrollIntoView({ behavior: 'smooth', block: 'nearest' }) - 不要依赖
position: fixed或transform强行上推——它们在 iOS 键盘弹起时表现极不稳定 - 避免在
input外层套overflow: hidden，这会阻止scrollIntoView正常工作
最难的不是让表单“看起来响应式”，而是让 label 的语义顺序、input 的触控区域、button 的收缩行为，在 iOS 和 Android 上都保持一致——每处 flex 属性都得带明确意图，不能靠“试试看”。
