SuperAPI AI 工具集

lovstudio-mobile-adapt

通用与其它

查看项目

更新于 10-16 00:01

技能介绍

用途:面向已有 Web 项目做移动端适配,涵盖 viewport 配置、溢出防护、安全区域处理、响应式断点、100vh 陷阱、触摸目标与多级页面导航。适用于把桌面优先站点改为移动可用、用户反馈手机上溢出或内容被裁切、刘海遮挡、为侧边栏布局加移动导航、修复 iOS/Android 的 100vh 问题,以及泛化的“让站点适配移动端”需求。

主要能力:扫描脚本检查 viewport meta 与 viewport-fit=cover、CSS 溢出风险(固定宽度、min-width)、100vh 使用、fixed/sticky 元素的 safe-area-inset、小于 44px 的触摸目标、响应式断点覆盖、Tailwind 问题(h-screen → h-dvh)、无省略处理的文本溢出。修复按优先级进行:viewport meta、全局 overflow-x: hidden、100vh 换 100dvh、安全区域内边距、图片与媒体 max-width: 100%、文本省略/line-clamp、放大触摸目标、补充移动优先媒体查询或 Tailwind 响应式、按需重构导航。导航改造时识别侧边栏/标签/嵌套面板结构,做响应式包装,移动端渲染为带返回按钮的全屏页面栈,使用 CSS 滑动过渡,md: 及以上保持桌面布局不变。

使用方式:先解析 SKILL_DIR(已安装技能上下文,手工执行时设为含 SKILL.md 的目录)。扫描:python3 "$SKILL_DIR/scripts/scan_mobile_issues.py" <project-path>,JSON 输出加 --format json。参数 project 必填为项目根路径,--format 默认 text。随后必须用 AskUserQuestion 确认修复范围(全部、仅布局溢出、仅导航、或指定类别),若桌面端有侧边栏/标签导航还需确认是否改为 push/pop 页面栈、底部 tab bar 或不动导航。修复时参考 references/mobile-patterns.md 中的模式。最后重跑扫描器、在 375px 宽度验证:无横向滚动、内容不被刘海或 Home 指示条裁切、可交互元素均可点按(44px+)、返回按钮可用、全高布局不溢出到浏览器 chrome 之后。

限制:资料未提供该技能的安装命令、支持的框架版本、脚本依赖与平台兼容性说明;导航重构模式需查阅 references/mobile-patterns.md,本文未展开。