用途:让页面主任务在窄屏、缩放下、触控、键盘与减少动效等呈现下可用。它负责视口相关布局、重排、溢出、触控人体工学、焦点可见性、移动导航行为与响应式验证;不改写产品主张、不删除产品需求、不发明移动端专属转化漏斗,也不替换项目视觉系统。若信息架构或界面职责本身有问题,应先使用落地页或界面设计类技能。
模式:Audit 只测量报告不改文件;Repair 测量后实施最小且连贯的响应式改动再对比;Build 在新建界面时应用响应式契约(无改动前基线);Handoff 在用户要求他人或其它智能体实现时,给出可独立执行的顺序化变更说明。需从请求推断模式并用一句话说明;修复或构建类请求即授权在范围内实施。
流程:先读仓库说明、布局原语、令牌、断点、导航、内容极端情况、浏览器测试与支持设备要求,并尽可能渲染当前界面。已有界面先读 references/audit.md 记录基线;页面高度只作诊断,不是目标。多数可逆修复直接做;仅当两种可行布局会实质改变内容顺序、导航可达性、对比行为或主操作时才提问,问题须简明并附推荐项与一个备选及取舍。不要让用户选择仓库本身能回答的断点、CSS 属性或实现细节。
布局与实现:按内容关系决定每组件处理——需顺序阅读时保留顺序,需同时比较时保留对比,保持导航与主操作可达但不让所有操作都粘性;仅当内容确实受益于二维或可浏览呈现时才用受控横向区域。读取内容须留在视口内,不得让有意的表格或轮播撑宽文档。断点放在内容或控件失效处,优先复用现有断点。优先使用固有尺寸、换行、grid minmax(0,1fr)、flex 子项 min-width:0 与内容驱动约束,再考虑加断点;保持语义顺序、焦点顺序与阅读交互顺序一致;自定义控件提供可用触控目标并正确应用 WCAG 尺寸与间距例外;横向滚动必要时把表格、图表、轮播放入有名称、键盘可达的滚动区域;固定或粘性控件需考虑安全区与被遮挡焦点;按预期行为选 svh、dvh 或普通文档流;为减少动效用户提供完整静态状态,而非仅缩短动画。不要默认添加轮播、汉堡菜单、底部 CTA 栏或移动端专属内容复制。
验证与交付:作合规声明前读 references/standards.md。实施后在 320px、375px、768px、1440px(如支持)重跑基线测量;测试 200% 缩放与 320 CSS 像素重排,在 1280px 宽呈现上验证 WCAG 重排时用 400% 缩放;测试键盘导航、可见焦点、触控、方向变化、文字放大与减少动效;测试真实长标签、本地化扩展、错误状态、展开菜单、对话框与软键盘行为;必要时在真机验证浏览器界面、安全区、输入法与已安装 Web 应用行为;运行仓库构建、测试与浏览器检查。审计交付测量表、排序发现、保留优点与顺序化修复建议;修复或构建报告观察到的失败与所选转换、改动文件与产品取舍、前后测量、已测宽度与缩放状态、输入与动效偏好,以及仍需真机或生产验证项。不能凭单张截图或无文档溢出就宣称“移动端完成”。