移动端表单必须设 flex-direction: column，label 和 input 需显式 for/id 绑定，input 触控区 min-height: 44px、box-sizing: border-box、width: 100%、max-width: 100%，间距统一用 gap。
移动端表单必须设 flex-direction: column
小屏下用 row 基本等于主动放弃对齐控制——哪怕只放两个字段，只要其中一个 label 文字稍长或 input 有默认内边距，就可能触发换行错位、宽度溢出或焦点区域偏移。
直接在外层容器（比如 .form-group 或 form）上写死 display: flex 和 flex-direction: column，别等媒体查询才切。平板横屏（如 iPad 1024×768）也可能需要竖排，靠断点反而漏覆盖。
label 和 input 必须显式绑定，不能包裹
写成 <label>姓名<input id="name"></label> 看似省事，但在 flex 布局下 DOM 顺序和视觉顺序可能错位，影响屏幕阅读器、焦点流，还容易让 Safari 把 label 当作 flex 子项参与伸缩计算，导致宽度失控。
正确写法是分开 + 显式 for/id 关联：
<label for="name">姓名</label><br><input id="name" type="text">
这样 label 和 input 各自独立参与 flex 排布，不会互相干扰尺寸计算。
输入框触控区域至少要 min-height: 44px
iOS 和 Android 对点击区域的容忍度极低：低于 44px 的 input 在 Safari 里常被缩放拉伸，在 Chrome 里则可能因 line-height 解析差异导致 placeholder 上浮、文字贴顶。
别只调 font-size 或 padding，直接加：
-
min-height: 44px（iOS 触控最小建议值） -
box-sizing: border-box（避免 padding/border 撑破容器） -
width: 100%或flex: 1（确保填满父容器） -
max-width: 100%（防 flex 容器本身超宽时子项撑破）
这四条缺一不可，尤其 max-width: 100% 常被忽略，但它是防止窄屏下 input 溢出的关键防线。
间距统一用 gap，别混用 margin-bottom
给每个 input 加 margin-bottom: 10px 表面看没问题，但最后一项会多出无用空白，还得额外清掉；更麻烦的是，如果后续加了 flex-wrap（比如两列布局），margin 根本无法控制行与行之间的间隙。gap 是 flex 原生支持的间距属性，只作用于子元素之间，不触发外边距合并，也不影响首尾元素位置：
.form-group {<br> display: flex;<br> flex-direction: column;<br> gap: 12px;<br>}
注意：gap 在 flex 中兼容性已覆盖所有主流移动端浏览器（Chrome 84+、Safari 14.1+、Firefox 63+），无需降级 fallback。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
