responsive

name	responsive
description	当用户发现页面在手机上显示有问题、布局错乱、需要适配移动端时使用 — 检查并修复响应式问题

移动端适配

帮用户检查并修复网站在手机和平板上的显示问题。

步骤

1. 扫描响应式问题

读取项目中的 CSS 和 HTML，检查：

• Viewport 设置 — 是否有正确的 viewport meta 标签
• 固定宽度 — 是否有硬编码的 px 宽度导致溢出
• 字体大小 — 移动端是否太小（最小 16px）
• 触摸目标 — 按钮和链接是否够大（最小 44x44px）
• 水平滚动 — 是否有元素超出屏幕宽度
• 媒体查询 — 是否有响应式断点
• 图片 — 是否设置了 max-width: 100%
• 导航 — 桌面导航在移动端是否可用

2. 输出问题报告

## 移动端适配报告

### 必须修复
- [文件:行号] 问题 + 修复方案

### 建议改进
- [文件:行号] 改进建议

3. 执行修复

用户确认后，修复所有问题：

• 添加 viewport meta 标签
• 固定宽度改为响应式（max-width、百分比、flex/grid）
• 添加移动端媒体查询
• 增大触摸目标尺寸
• 导航改为汉堡菜单（如果需要）

4. 验证

适配完成。建议用浏览器的设备模拟器检查以下尺寸：

• 手机：375px（iPhone）、390px（iPhone Pro）
• 平板：768px（iPad）