移动端适配与错版修复

我的页面在手机上有问题，帮我修。

问题描述：{{如 底部按钮被安全区挡住 / 横向出现滚动条 / 文字挤成一团}}
复现条件：{{设备或宽度，如 iPhone SE 375px}}

相关代码：
```
{{贴结构 + 样式代码}}
```

要求：
1. 先说清为什么会错版（是固定宽高、没设断点、还是安全区问题）。
2. 给出修改后的完整代码。
3. 确保：不出现横向滚动、关键按钮不被遮挡、文字不小于 {{如 12px}}、点击区域不小于 44px。
4. 说明你在哪些断点做了什么调整。

约束：
- 不要为了手机端把桌面端搞坏，两边都要正常。
- 优先用响应式方案，不要写两套代码。
- 不要靠 overflow: hidden 硬盖住问题。

把 {{}} 里的部分换成你自己的内容

为什么这么写

1. 先要原因再要代码，避免 AI 用暴力手段（比如全局缩放）掩盖真正问题
2. 量化验收标准（不横向滚动、44px 点击区）让修复结果可验证，而不是「看着还行」
3. 「不要靠 overflow:hidden 硬盖」堵住最常见的假修复——问题还在，只是看不见了
4. 要求兼顾桌面端，防止按下葫芦浮起瓢

用起来的样子

底部固定按钮在 iPhone 上被小黑条挡住，AI 会加 env(safe-area-inset-bottom) 而不是简单加 padding。

常见坑

• !只说「手机上有问题」不给具体宽度，AI 没法针对性修
• !用 overflow:hidden 或 zoom 硬压，真机上换个机型又崩

相关分类