用途:为触屏设备构建移动优先、性能良好的界面,覆盖视口处理、触摸目标尺寸、手势、移动导航与响应式布局。
主要能力:解决 100vh 被浏览器工具栏遮挡的问题(改用 100dvh 并保留 100vh 回退);用 env(safe-area-inset-*) 处理刘海与 Home 指示条,需配合 viewport-fit=cover 的 meta 标签;遵循 44×44px 最小触摸目标(Material 建议 48×48dp);提供底部导航、抽屉菜单等移动导航模式;提供 useSwipe()、usePullToRefresh() 手势 Hook;给出图片优化、动态导入、骨架屏等性能做法;介绍 Tailwind 断点策略与容器查询。
使用方式:作为技能在需要移动端适配时调用。示例中给出 Tailwind 安全区工具类、底部导航与抽屉组件、手势 Hook 的用法,以及用 npx localtunnel --port 3000 或 ngrok http 3000 在真机测试本地服务。
适用场景:视口问题、触摸目标与间距、移动导航、滑动手势与下拉刷新、响应式断点、移动性能优化。
限制:不适用于原生应用开发、纯桌面功能、通用 CSS/Tailwind 问题以及 PWA 安装与 Service Worker,这些应使用对应技能或文档。具体安装命令与版本要求资料未提供。