用Bootstrap 5实现收货地址页需关闭form-control圆角与阴影、用select+JS实现省市区三级联动、保存按钮固定底部并禁用防重复、设置viewport防iOS缩放、确保字体≥16px。
用 Bootstrap 5 的表单组件就能做，但必须关掉 form-control 的默认圆角和阴影
Bootstrap 默认给 form-control 加了 border-radius: 0.375rem 和 box-shadow: 0 0 0 0.25rem rgba(13,110,253,.25)，这在手机上显得臃肿、占空间。收货地址页需要紧凑排版和清晰焦点反馈，得手动覆盖：
- 在 CSS 中加
.form-control { border-radius: 0; box-shadow: none; } - 如果用的是 Bootstrap 5.3+，可直接加
rounded-0和shadow-none类 - 别只改
input，select和textarea也要同步处理，否则下拉框边缘突兀
省市区三级联动不能靠 Bootstrap 自带组件，得用 select + JavaScript 动态渲染
Bootstrap 不提供地理级联逻辑，form-select 只是美化原生 select。真实场景中，用户选“广东省”后，“深圳市”选项要立刻加载，且不能卡顿：
- 推荐用轻量数据源，比如
china-divisionnpm 包（含 JSON 数据），避免引入完整地图 SDK - 三个
select元素必须加data-level="province/city/district"标识，方便 JS 绑定事件 - 首次加载时，只初始化省级
select；选中后用fetch()或本地 JSON 过滤出下级，再清空并重写option—— 别用innerHTML +=，会触发多次重排 - 移动端注意：iOS Safari 对
select的原生弹出框不支持自定义样式，所以别试图用appearance: none覆盖，老老实实用它
保存按钮必须用 btn-lg + 固定底部，且禁用状态要视觉明确
手机端拇指操作区域有限，按钮太小或位置飘忽会导致误点或漏点。Bootstrap 的 btn 默认尺寸在手机上不够用：
- 按钮加
btn-lg w-100 fixed-bottom mb-3 mx-3，确保宽度撑满、底部固定、外边距留白 - 点击后立即设
disabled并加opacity-75，防止重复提交；同时把文字从“保存”变成“保存中…” - 别用
position: fixed后再套container，容易因 padding 错位，直接让按钮脱离文档流，用bottom: 20px更稳 - 如果页面内容过长，滚动时按钮要始终可见 —— 检查是否被
overflow: hidden父容器截断
输入框聚焦时 iOS 会放大页面，得用 viewport meta 控制
这是真机调试时最常被忽略的问题：iOS Safari 在 input 获得焦点时，若字体小于 16px 或容器宽度太小，会自动缩放整个视口，导致布局错乱、按钮移位：
-
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">必须存在 - 所有表单项的
font-size不能低于16px（哪怕用rem，计算后也得 ≥16） - 避免给
input设width: 90%这类相对宽度过小的值；用col-12或w-100更稳妥 - 测试时用真机 Safari 打开，点每个输入框，看地址栏是否跳动 —— 跳了就是缩放触发了
地址编辑页真正的复杂点不在样式，而在数据联动时机和移动端交互反馈的匹配度。比如用户快速连点两次“保存”，后端没返回前就切到别的 App，回来时按钮状态可能没恢复 —— 这类边界得靠 loading 状态 + abortController 配合处理，不是加个 class 就完事的。
