移动端注册页须用Flexbox实现流式表单，禁用table布局；确保label/input语义绑定、44px最小点击区、禁用user-scalable=no，并为验证码等复合控件单独封装与无障碍支持。
移动端注册页面不能靠 <table> 布局硬撑，一缩放就横向溢出，iOS Safari 里 <code>width="100%" 还可能失效——这不是对齐问题，是根本不可用。
用 Flexbox 实现单列流式表单结构
Flexbox 是目前最稳妥的移动端表单容器方案，天然支持垂直堆叠、间距可控、无宽度依赖。关键不是“怎么排”，而是“不设固定宽”+“让内容自适应”。
-
form设为display: flex+flex-direction: column，子元素（每组label+input）默认垂直排列 - 每个字段包装成
<div class="field">，内部用 <code>display: flex+flex-direction: column确保 label 在上、input 在下 - 所有
input、button必须设width: 100%，但加max-width: 100%防止在窄屏被父容器撑爆 - 避免
float、inline-block或position: absolute—— 它们在小屏上极易破坏可访问性与滚动行为 -
<label for="username">用户名</label>和<input id="username">的id/for值必须严格一致，大小写、空格、连字符都不能错 - 不要用
<div>用户名</div> <input>替代 —— 即便看起来对齐了，也等于放弃 WCAG AA 合规性 - 如果 label 文字过长换行，加
white-space: normal+word-break: break-word，别让它把整行撑宽 - 最小点击区域必须 ≥ 44×44px：给
input和button设min-height: 44px，配合padding调整内边距 - 字体大小不能低于
16px（iOS 默认最小可读字号），font-size: 1rem是安全起点 - 只在内容确实“挤不下”时才加断点，例如验证码输入区含图片+输入框+发送按钮，横向空间不足时，改用
flex-direction: column垂直堆叠 - 禁用
user-scalable=no—— 屏幕阅读器用户需要缩放，禁止缩放会直接导致部分人群无法完成注册 - 用
<div class="captcha-group"> 包裹，内部用 <code>display: grid或嵌套 flex 控制三者布局：图片占上，输入框和按钮并排或上下堆叠 - “获取验证码”按钮必须设
type="button"，防止误触提交整个表单 - 短信验证码输入建议用
inputmode="numeric"+pattern="[0-9]*"，唤起数字键盘；同时加autocomplete="one-time-code"，让 iOS/Android 自动填充 - 所有验证码相关字段都要有明确的
aria-live="polite"区域，提示倒计时或错误状态，否则视障用户不知道操作是否成功
label 和 input 的语义对齐必须靠 for/id 绑定
视觉对齐只是表象，真正影响可用性的是键盘焦点和屏幕阅读器支持。很多开发者把 label 当成纯文本写，结果用户点文字无法聚焦输入框。
响应式断点要按内容而非设备尺寸设
别再写 @media (max-width: 768px) 这种“伪断点”。移动端注册页真正的瓶颈是输入框高度、文字可读性、手指点击区域——这些跟物理像素关系不大。
立即学习“前端免费学习笔记（深入）”；
验证码与短信输入这类复合控件要单独封装
图形验证码+输入框+“获取验证码”按钮这三者，在小屏上极易错位或重叠。它们不是普通字段，而是一个逻辑单元。
最常被忽略的一点：表单提交后，页面不应停留在原地静默加载。移动端网络不稳定，用户需要明确反馈——哪怕只是 button 变成 loading 状态并禁用，也比空白等待强。这个细节没处理好，注册流程就算布局再完美，也会在真实场景中掉量。
