跨屏幕视觉验收：列布局、文字和照片
页面没有溢出，也可能难以阅读。在发布修改之前，检查比例、长内容和交互状态。
六项可重复的检查
选择代表性页面
测试首页、分类、文章、服务、表单和数据表。包含长标题、从右到左书写的语言和多张照片。
比较列布局
检查320、390、768、1280、1440和1920 px宽度下的对齐、阅读顺序和间距。不要通过隐藏溢出来掩盖布局问题。
放大文字
检查200 %文字放大和320 CSS像素宽度下的内容重排。信息和控件应保持可用；数据表可以使用独立滚动区域。
检查照片
检查裁切、主体、尺寸和署名。不要让照片随旁边文字的高度拉伸。描述可见内容，并标明图库照片。
测试交互
用键盘操作菜单、筛选、常见问题和表单。不发送真实咨询，检查焦点、错误提示和出错后的输入保留。
保存证据
记录URL、语言、宽度、浏览器、缺陷及修复结果。访问量足够时，用真实用户数据补充实验室测量。
需要保存的验收记录
- URL和语言
- 屏幕与缩放比例
- 缺陷与截图
- 修复及复测结果
这是工作方法，不是符合性证明。请调整范围并记录例外。
发布前的六项功能检查
- 操作菜单、链接、下载和语言切换，核对实际目标。
- 使用虚构数据测试空字段、无效地址、不同字符和长文本。
- 确认错误指出具体字段、支持键盘操作，并保留有用的输入。
- 同时测试服务器端验证；浏览器检查可以被绕过。
- 区分接收确认与实际送达，使用获准的测试目标。
- 检查禁用 JavaScript、拒绝和恢复状态，不在证据中记录秘密。
不同情况与适用检查
小屏幕上可横向滚动表格。使用键盘时，将焦点移到表格并使用方向键。
| 情况 | 说明的问题 | 有效检查 |
|---|---|---|
| 文字放大至200%后控件消失。 | 放大后无法继续完成任务。 | 调整布局并用键盘重测。 |
| 桌面照片拉伸或留下大片空白。 | 比例破坏相邻内容的平衡。 | 检查尺寸限制和阅读顺序。 |
| overflow: hidden截断表格。 | 数据被隐藏。 | 为表格提供可用键盘操作的独立滚动区域，并允许单元格文字换行。 |
| 另一语言的译文标题被截断。 | 只测试一种语言不够。 | 测试长文本、RTL语言和实际语言切换。 |
虚构示例
一个虚构服务页在1,440像素下正常。320像素时长译文标题被截断；文字放大至200%后FAQ控件无法使用。
限制照片尺寸，让列可以收缩、文字可以换行。在320、390、768及1,440像素下，结合文字放大和键盘重复任务。记录剩余缺陷，修复后复测。
验收标准
- 代表性宽度和语言下信息与控件可读。
- 文字放大和键盘操作仍能完成任务。
- 已记录版本、浏览器、语言和复测结果。
实际问题
一张截图够吗？
不够。它只验证一种状态。还应测试长内容、键盘操作，以及展开、筛选和错误状态。
是否存在统一适用的字号？
没有。应评估可读性、行长、缩放和对比度。字号本身不能保证无障碍或视觉平衡。
如何理解Core Web Vitals？
良好体验阈值为第75百分位的LCP ≤ 2.5 s、INP ≤ 200 ms和CLS ≤ 0.1。它们衡量加载、交互和稳定性，不能代替视觉验收。
需要每种设备的截图吗？
选择主要页面类型、有用任务及出现差异的浏览器。记录覆盖限制；少量截图不能证明所有设备均可用。
如何确定显示修复优先级？
先处理任务阻断、隐藏数据和可读性，再改善比例、对齐与间距，并确认其他页面功能仍正常。