在手机、桌面
和键盘下检查

先理解今天的原理

响应式设计依赖内容在不同空间里的重新排列。缩小浏览器只能发现一部分问题，还要检查触控目标、键盘顺序、真实链接和图片加载。

测试证据需要包含条件、动作、预期与实际结果。只写“测过了”无法帮助你复现问题，也无法判断修复是否有效。

为什么今天要做这件事

1. 移动端常出现横向滚动、标题溢出和按钮过小。
2. 键盘测试能发现不可聚焦、顺序混乱和焦点不可见。
3. 固定矩阵让修复后可以重复运行同一组检查。

开始前检查

这是第 05 天。先完成下面的检查，再开始操作。缺少关键材料时，先补材料，不要让 Agent 猜。

1. 页面内容和主要交互已经稳定。
2. 准备 390px、768px 和桌面三种宽度。
3. 建立 evidence/day-5-test.md 记录测试。

一步一步完成

第 1 步：先建立今天的测试记录

测试记录要写条件、动作、预期和实际结果。这样修复以后可以重复同一组动作，也能分清问题发生在手机宽度、键盘操作还是资源加载。

1. 在 evidence 中创建 day-5-test.md。
2. 复制下方测试矩阵。
3. 先填写预期结果，不急着写“通过”。
4. 为每个失败项预留截图或控制台错误位置。

完成这一步后，你应该看到：测试表包含 390px、768px、桌面、键盘、链接和控制台六类检查，每项都有空白实际结果。

第 2 步：从 390px 手机宽度完整浏览

手机宽度最容易暴露标题溢出、图片过宽、按钮拥挤和页面横向滚动。检查时要从顶部走到页尾，不能只看首屏。

1. 打开浏览器开发者工具，把视口宽度设为 390px。
2. 刷新页面，从首屏缓慢滚动到联系方式。
3. 观察页面是否能左右拖动；能拖动时记录最先超出边界的元素。
4. 检查标题换行、作品卡片、图片比例和链接触控区域。
5. 为每个失败位置保存截图，并写进测试表。

完成这一步后，你应该看到：页面没有横向滚动，文字没有被裁掉，图片和链接都留在屏幕内，主要入口可以用手指点击。

第 3 步：检查 768px 和桌面宽度

平板宽度会触发分栏切换，桌面宽度会暴露内容过散或两侧对不齐。两种状态都要完整浏览。

1. 把宽度改为 768px，刷新并从头检查到页尾。
2. 恢复桌面宽度，再检查首屏、作品区和联系方式的对齐。
3. 在两种宽度分别点击三个作品链接。
4. 记录只在某一宽度出现的问题，不把它写成全局问题。

完成这一步后，你应该看到：768px 下内容顺序合理，桌面下没有异常空洞或重叠；三种宽度使用的是同一份真实内容。

第 4 步：只用键盘走完整个页面

键盘测试可以发现链接无法聚焦、焦点顺序跳跃和焦点样式看不见。测试时先把鼠标移开，只使用 Tab、Shift + Tab 和 Enter。

1. 刷新页面，把焦点放在地址栏。
2. 连续按 Tab，记录每次焦点落在哪里。
3. 确认顺序跟页面从上到下的阅读顺序一致。
4. 在每个作品链接和联系方式上按 Enter。
5. 用 Shift + Tab 倒退一次，确认焦点也能返回。

完成这一步后，你应该看到：所有交互都能获得可见焦点，顺序合理，Enter 可以触发链接，焦点不会掉进看不见的元素。

第 5 步：检查链接、图片和控制台

页面外观看起来正常时，控制台仍可能有脚本错误、资源 404 或失效链接。今天要把这些技术问题也写进同一张测试表。

1. 逐个打开站内链接、站外作品链接和联系方式。
2. 确认目标正确，并能回到作品主页继续测试。
3. 打开浏览器控制台后刷新页面。
4. 记录红色错误、图片 404 和脚本警告的完整文字。
5. 打开网络面板，确认主要图片返回成功状态。

完成这一步后，你应该看到：所有链接指向正确目标，主要图片正常加载，控制台没有阻断页面使用的红色错误。

第 6 步：只修阻断项并重新跑完整矩阵

今天先处理会阻止浏览、查看作品和联系的问题。修复后要从第一项重新开始，因为一个响应式改动可能同时影响其他宽度。

1. 把失败项标为阻断、高、中或低影响。
2. 一次只修一个阻断或高影响问题。
3. 修复后重复对应条件，确认问题消失。
4. 再从 390px 开始重跑整张矩阵。
5. 保存修复后的实际结果和截图。

完成这一步后，你应该看到：所有阻断项和高影响项已经通过；未处理的小问题有清楚记录，不会被误写成已完成。

| 编号 | 条件 | 动作 | 预期 | 实际 | 状态 | 证据 |
|---|---|---|---|---|---|---|
| T01 | 390px | 从首屏浏览到页尾 | 无横向滚动和裁切 |  | 未测 |  |
| T02 | 768px | 浏览全部内容 | 分栏顺序合理 |  | 未测 |  |
| T03 | 桌面 | 浏览全部内容 | 对齐稳定、无重叠 |  | 未测 |  |
| T04 | 键盘 | Tab 与 Enter 访问链接 | 焦点可见、顺序合理 |  | 未测 |  |
| T05 | 所有链接 | 逐个打开并返回 | 指向正确目标 |  | 未测 |  |
| T06 | 控制台 | 刷新页面 | 无阻断错误与 404 |  | 未测 |  |

请读取 evidence/day-5-test.md 和对应截图，只整理测试结果，不修改文件。

请按阻断、高、中、低四级列出问题。每项包括：
- 出现条件；
- 复现步骤；
- 预期与实际差异；
- 可能原因；
- 建议先做的最小修复。

没有实际证据的问题不要加入清单。

这次真实操作得到了什么

1. 桌面和平板通过；手机没有横向溢出，但主标题被拆成 5 行，留下了真实失败项。

本次实际结果：页面能打开不等于移动端通过，第 6 天继续修复标题断行。

正确结果长什么样

完成操作后，用结果来判断今天是否学会。页面能打开或命令能运行，只能说明流程启动了；下面这些证据同时出现，今天才算完成。

1. 390px、768px 和桌面宽度都没有横向滚动或遮挡。
2. 只用键盘可以按合理顺序访问所有交互。
3. 所有链接指向正确目标。
4. 控制台没有阻断错误，测试表保留了实际结果。

常见错误与恢复

留给明天的材料

结束前把今天的关键结果保存到项目目录。下一天会直接使用这些材料，保存清楚可以减少重复说明和错误猜测。

1. 完整测试矩阵。
2. 修复前后截图或录屏。
3. 仍未解决但不会阻断交付的问题清单。