mobile-adaptation

name	mobile-adaptation
type	ui-ux-rule
description	移动端适配规范——响应式设计、触摸交互、性能优化、可访问性。当涉及移动端或响应式 UI 开发时自动触发。 触发词：移动端、响应式、手机端、适配、H5、小程序、touch。
version	1.0.0
author	wta

移动端适配规范

Iron Law

禁止未做移动端测试就声称支持移动端。 在 iOS Safari 和 Android Chrome 双平台测试通过前，不得声称移动端适配完成。

响应式设计原则

断点定义

断点	宽度	设备类型
xs	< 576px	手机竖屏
sm	>= 576px	手机横屏
md	>= 768px	平板
lg	>= 992px	小桌面
xl	>= 1200px	大桌面

移动优先（Mobile First）

• 基础样式针对移动端（最小屏幕）
• 使用 min-width 媒体查询向上扩展
• 避免 max-width 从桌面端向下缩减

触摸交互规范

规则	说明
点击区域 >= 44x44px	iOS HIG 和 Material Design 的建议最小触摸目标
间距 >= 8px	可点击元素之间至少 8px 间距
提供触摸反馈	按下态（:active）、加载态、禁用态
避免 hover 依赖	移动端没有 hover，关键信息不能仅通过 hover 展示
手势冲突避免	页面内滚动不拦截系统手势（返回、下拉通知）

性能优化

• 图片使用响应式尺寸（srcset / picture 元素）
• 图片懒加载（loading="lazy"）
• 首屏 JS 体积控制在 200KB 以内
• 非首屏组件代码分割（dynamic import）
• 滚动列表使用虚拟滚动（超过 100 项时）
• 动画使用 transform 和 opacity（避免触发 layout）

可访问性

• 图片有 alt 文字
• 表单输入有 label 关联
• 颜色对比度符合 WCAG AA 标准（至少 4.5:1）
• 不依赖颜色传达关键信息（同时使用图标或文字）
• 支持 200% 文字缩放不破坏布局

移动端测试清单

• iOS Safari 和 Android Chrome 双平台测试
• 弱网环境测试（3G 限速）
• 横竖屏切换测试
• 系统字体大小设置为最大时布局正常
• 无横向滚动条（除非明确需要）
• 键盘弹出时输入框不被遮挡

移动端适配自检列表

• 使用移动优先（Mobile First）策略？
• 断点定义合理（xs/sm/md/lg/xl）？
• 点击区域 >= 44x44px？
• 可点击元素间距 >= 8px？
• 提供触摸反馈（按下态、加载态、禁用态）？
• 避免依赖 hover（移动端没有 hover）？
• 图片使用响应式尺寸和懒加载？
• 首屏 JS 体积控制在 200KB 以内？
• 颜色对比度符合 WCAG AA 标准（至少 4.5:1）？