responsive-ui-qa

响应式 UI 质量保证

查找根本原因，而不是针对特定截图打补丁。提供证据，证明修复后报告的问题状态已正常工作。

工作流

1. 阅读仓库的运行和测试说明。使用常规命令启动应用。
2. 制定简洁的测试矩阵：
   • 关键路由或组件；
   • 默认、加载中、空、错误、长内容和交互状态；
   • 相关的窄屏移动设备、移动设备、平板或窄容器、桌面和宽屏桌面。
3. 编辑前，重现报告中的确切缺陷。记录视口、路由、状态和交互。
4. 检查布局机制：包含块、网格／弹性布局约束、固有尺寸、最小宽度、换行、定位、堆叠、溢出以及固定／粘性偏移。
5. 对严重程度进行分类：
   • 阻断 - 操作或内容无法访问；
   • 严重 - 交互或理解受到实质影响；
   • 轻微 - 可见的细节问题，但不影响任务完成。
6. 通过最小且一致的改动修复底层约束。避免针对特定视口设置偏移，除非设计确实在该处发生变化。
7. 测试内容压力情况：长标签、无空格字符串、本地化文本扩展、缺失或大型媒体、验证文本和动态列表。
8. 测试输入方式和偏好模式：键盘、适合触控的目标尺寸、焦点可见性、可行时的缩放，以及减少动态效果设置。
9. 重新测试失败案例以及相邻宽度和状态。检查是否引入了新的水平滚动或隐藏内容。
10. 报告证据、剩余风险以及本地无法测试的内容。

修复规则

• 优先使用固有布局、换行、minmax()、min-width: 0、max-width、aspect-ratio 和适配容器的规则。
• 如果仅靠重排不足以解决问题，则在断点处调整信息架构。
• 不要通过全局隐藏溢出或将文本缩小到难以阅读的程度来“修复”溢出。
• 仅对具有明确尺寸约定的控件和媒体使用固定尺寸。
• 避免固定或粘性 UI 遮挡获得焦点的元素和锚定内容。
• 通过检查渲染像素和调整大小时的行为，验证 canvas、WebGL、视频、图表、地图和嵌入内容。
• 保留触发错误的确切状态下的行为。

交付要求

返回：

1. 测试矩阵 - 路由／状态／视口／输入方式。
2. 发现 - 严重程度、重现方式和根本原因。
3. 修复 - 改动的文件及约束为何合理。
4. 证据 - 修复前后的截图或明确的浏览器观察结果。
5. 剩余风险 - 未测试的浏览器、数据状态或环境。

参考

阅读 references/qa-checklist.md，完成最终的跨视口和交互检查。