手机端支付成功页推荐用Bootstrap 5，需用container-fluid+text-center布局、禁用viewport缩放、内联SVG图标、btn-lg w-100按钮及text-success状态色，避免PC栅格和Alert组件。
手机端支付成功页不需要 Bootstrap 也能做，但如果你项目里已经引入了 Bootstrap 5（推荐），直接用它的响应式工具类和组件能快速产出符合移动端体验的页面，关键在于「别套用 PC 端栅格」和「禁用缩放干扰」。
用 Bootstrap 5 的 container-fluid + text-center 控制基础布局
移动端不需要左右留白或固定宽度容器，container 会加 max-width 和 padding，反而造成横向滚动或内容偏移。必须用 container-fluid 拉满全屏宽度，再靠 text-center、mt-5、mb-4 这类间距工具垂直居中核心内容。
常见错误：把 PC 端的 container 直接搬过来，结果在 iPhone 上左右滑动才能看到按钮。
- 标题用
<h1 class="h4"></h1>，避免默认h1字体过大压过图标 - 图标建议用 SVG 内联（比如勾选图标），不要依赖 Bootstrap Icons 的 JS 加载，防止白屏闪动
- 按钮用
btn btn-primary btn-lg w-100，确保点击区域足够大且占满屏幕宽度
支付状态图标用 svg 配合 text-success 而不是 Alert
Alert 组件带边框、背景色和内边距，会破坏简洁感；支付成功页的核心视觉锚点是那个对勾图标，应该轻量、居中、高对比。Bootstrap 的 text-success 只改颜色，不加样式干扰，配合自定义 SVG 更可控。
使用场景：微信/支付宝 H5 支付回调后跳转的静态结果页，不涉及动态状态轮询。
- 别用
alert-success—— 它默认有 border-left 和 padding，和设计稿冲突 - SVG 尺寸设为
width="64" height="64"，用mx-auto d-block居中 - 文字状态描述用
lead类，字号适中，行高宽松
禁用 viewport 缩放，否则 btn-lg 在 iOS 上可能被误判为可缩放区域
很多开发者漏掉这步，导致用户双指一点页面就放大，按钮点不上。Bootstrap 本身不控制 viewport，必须手动补全：
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
注意 maximum-scale=1 和 user-scalable=no 缺一不可。iOS Safari 对 user-scalable=yes（默认）特别敏感，哪怕只是快速双击空白处也会触发缩放，让 btn-lg 看起来变小、点击热区偏移。
- 不要写
initial-scale=1.0—— 尾部的.0在某些 Android WebView 里会失效 - 如果用了
bootstrap@5.3+，确认没启用data-bs-theme="dark"等未适配的全局主题，它可能覆盖text-success的颜色 - 真机测试时，重点看微信内置浏览器（X5 内核）下按钮是否响应及时，X5 对
pointer-events处理较怪
最易被忽略的是 viewport 的 maximum-scale 和 SVG 图标的渲染时机——前者导致交互失败，后者导致首屏白块。做完别只在 Chrome DevTools 里切 iPhone 模式看，拿两台真机（iOS + Android）各点三次支付回调链接，观察按钮是否立刻可点、图标是否秒出。
