手机端问卷页应默认触控优化：用form-control确保点击区域、col-12垂直堆叠表单项、form-check封装单选/多选、btn-lg w-100按钮防重复提交、is-invalid+invalid-feedback配合focus与scrollIntoView实现友好验证反馈。
用 Bootstrap 5 的 form-control 和响应式栅格做基础布局
手机端问卷页的核心不是“适配”，而是“默认就为触控优化”——Bootstrap 5 已移除 jQuery 依赖，form-control 默认有足够大的点击区域（padding: 0.375rem 0.75rem），input、select、textarea 在 iOS/Android 上不会触发缩放异常。别手动加 viewport meta（Bootstrap 5 文档已要求必须包含），但要确认 HTML 开头有：
<meta name="viewport" content="width=device-width, initial-scale=1">
栅格用 col-12 而非 col-md-6：手机屏宽有限，所有表单项默认独占一行，避免横向滚动或错位。
单选/多选按钮用 form-check，别用原生 input[type="radio"] 直接写
原生 radio 在部分 Android 浏览器上点击热区小、反馈弱；form-check 封装后，label 包裹 input，点击文字或圆圈都生效。关键点：
-
form-check-input必须紧跟form-check-label，且 label 的for属性要匹配 input 的id - 多选题用
form-check-inline会强制横排——手机上慎用，易换行错乱；坚持垂直堆叠（默认form-check） - 禁用状态加
disabled到input，不要只加在 label 上
示例：
<div class="form-check"> <input class="form-check-input" type="radio" name="q1" id="q1-a" value="a"> <label class="form-check-label" for="q1-a">非常满意</label> </div>
提交按钮用 btn btn-primary btn-lg w-100，禁用默认加载态
手机用户习惯“点一下就响应”，但表单提交常伴随网络请求，需防重复点击。Bootstrap 的 btn-lg 提高触控面积，w-100 确保宽度撑满（避免窄按钮被误点空隙）。别依赖 CSS 动画模拟 loading，直接 JS 控制：
- 点击后立即
button.disabled = true并改文字为“提交中…” - 成功/失败后恢复按钮状态，否则用户可能以为没点上又狂点
- 不推荐用
data-bs-toggle="button"，它只处理视觉切换，不防重复提交
错误现象：没禁用按钮 → 用户连点 3 次 → 后端收到 3 条重复问卷。
验证失败时用 is-invalid + invalid-feedback，且 focus 到第一个错项
手机屏幕小，验证提示若挤在输入框下方或消失太快，用户根本看不到。Bootstrap 的 is-invalid 会加红框，invalid-feedback 块级显示在下方。但要注意：
- 必须给
input加aria-describedby指向invalid-feedback的 id，否则读屏器无法播报 - JS 校验失败后，调用
input.focus()，让软键盘自动弹出并定位到首个错误项 - 别用
title属性做提示——手机上不显示
容易被忽略的是：如果问卷有 10 个问题，第 8 个报错，但页面没滚动到可视区，用户会卡住。得补一句 input.scrollIntoView({ behavior: 'smooth' })。
