实战：移动端和响应式检查

Claude Code 移动端 UI 检查教程：前端改完不能只看桌面端，还要检查文字溢出、按钮挤压、导航错位和遮挡。

让 CC 做响应式检查

移动端不是“缩小版桌面”。最容易坏的是导航、按钮、长标题、表格、卡片网格和固定宽度容器。

/verify

请对本次页面修改做响应式检查。

重点检查：
1. 390px 手机宽度。
2. 768px 平板宽度。
3. 1440px 桌面宽度。
4. 按钮文字是否溢出。
5. 标题、卡片、导航是否重叠或遮挡。
6. 主要操作是否还能点击。
7. 如果无法实际截图，请说明人工检查步骤。

如果时间有限，至少检查 390px 和 1440px。一个代表移动端，一个代表桌面端。

移动端检查不是只看“页面能打开”，而是看用户能不能读、能不能点、能不能完成主流程。

请先列出本页面移动端需要重点检查的对象。

要求：
1. 顶部导航。
2. 主标题和长文本。
3. 按钮和表单控件。
4. 图片、表格、代码块。
5. 侧边栏或目录。
6. sticky / fixed 元素。
7. 主要用户操作路径。

有了检查对象，再让 CC 按宽度逐项验收。

不要只说“手机端不好看”。要描述现象、宽度、位置和期望。

移动端出现问题。

页面：
【页面 URL 或文件】

视口：
【例如 390px 宽】

现象：
【例如按钮文字换行后高度太高，遮住下一段内容】

期望：
【例如按钮可以换行，但不能遮挡正文；两个按钮可以上下排列】

限制：
1. 只修移动端相关样式。
2. 不破坏桌面端。
3. 不改业务逻辑。

移动端还有问题，请继续修复。

问题：
【描述移动端截图或现象】

要求：
1. 只修改和移动端问题直接相关的样式。
2. 不要破坏桌面端布局。
3. 不要改业务逻辑。
4. 修改后再次检查 390px、768px、1440px。

请修复移动端问题，但保持桌面端布局不变。

要求：
1. 优先使用响应式 CSS。
2. 不要为了移动端删除桌面端内容。
3. 不要改变业务逻辑。
4. 修完后说明哪些样式只在小屏生效。
5. 同时验证 390px 和 1440px。

如果 CC 修改了全局样式，要让它解释影响范围：

请说明这次样式修改的影响范围。

要求：
1. 哪些选择器被修改。
2. 是否只在小屏生效。
3. 是否影响其他页面。
4. 是否可能影响桌面端。
5. 如果影响范围过大，请给出更小的方案。

请专门检查文字和按钮是否会溢出。

重点：
1. 最长标题。
2. 最长按钮文案。
3. URL、命令、文件路径。
4. 表格或代码块。
5. 中文和英文混排。
6. 小屏下是否出现横向滚动。

如果 CC 不能实际打开浏览器或截图，就让它给人工步骤。

如果你无法实际查看页面，请给我人工响应式验收步骤。

请说明：
1. 打开哪个页面。
2. 分别设置哪些宽度。
3. 每个宽度重点看什么。
4. 哪些现象表示失败。
5. 发现问题后应该如何描述给你。

请输出移动端响应式检查报告。

请说明：
1. 检查了哪些宽度。
2. 发现了哪些问题。
3. 修复了哪些问题。
4. 哪些问题需要人工截图确认。
5. 桌面端是否仍然正常。