用途
mobile-native 是一个“修复型”技能，目标很单一：把那些在手机上让人感觉像“网站”而非“已安装应用”的破绽，一条一条地消除掉。它不负责设计动效、不负责审查动效、也不负责 React Native 开发，而是专注于平台层——视口、触摸、滚动、安全区域、浏览器界面——这少数几行代码决定了应用是“已安装”还是“嵌入在浏览器里”。
主要能力
该技能以一张“症状表”作为入口，将用户观察到的现象映射到具体修复方案。涵盖的问题包括：
- 点击后 hover 状态卡住：用
@media (hover: hover) and (pointer: fine)包裹所有悬停样式。 - 点击时出现灰色/蓝色闪烁：全局设置
-webkit-tap-highlight-color: transparent。 - 布局高度错误：应用外壳用
100dvh，首屏用100svh，避免 URL 栏显隐导致溢出。 - 页面缩放进入输入框：将输入框字体至少设为 16px，而非使用
maximum-scale=1。 - 点击感觉迟钝：使用
touch-action: manipulation消除 300ms 延迟，并在按下时（:active/pointerdown）给出反馈。 - 下拉刷新劫持滚动：在
html, body上设overscroll-behavior: none，内部滚动容器用contain。 - 内容被刘海遮挡：添加
viewport-fit=cover并用env(safe-area-inset-*)做内边距。 - 长按选中按钮文字：对控件设
user-select: none，但绝不对正文设。 - 轮播纵向滚动异常：用
touch-action: pan-y/pan-x/none明确元素拥有的轴向。 - 状态栏颜色不匹配：按
prefers-color-scheme分别提供theme-color。 - 在 Chrome 里正常、在手机上不对：强调必须真机测试。
使用方式
技能以“修复”为导向：用户描述症状，技能从症状表中匹配对应项，然后给出具体的 CSS 声明或 meta 标签及原因。它要求每条修复都附带理由，并且只在理由适用的地方应用，而不是习惯性地全局套用。它强调用媒体查询而非设备嗅探、触摸与鼠标并非互斥、绝不禁用缩放、并且在宣布“修好了”之前必须在真机上测试。技能还提供了一份“基线”配置，建议在开发移动端应用时先铺设这些基础设置，以及一份“切勿发布”的自检清单。
适用场景
适用于任何需要让 Web 应用在手机上感觉更接近原生体验的场景，尤其是涉及抽屉、底部面板、手势驱动 UI、固定头部/底部栏、聊天列表、轮播等交互的移动端 Web 应用。也适用于以已安装 PWA 为目标的项目，因为独立模式会改变视口、安全区域和状态栏行为。
限制
该技能明确说明：上述所有问题都无法在桌面浏览器的设备模拟器中复现，必须连接真机通过 USB 调试（iOS 用 Safari，Android 用 chrome://inspect）来验证。它无法替代真机测试，也无法验证自身在硬件上的最终表现——哪些修复能从代码层面确认、哪些必须由用户在真机上确认，技能会明确指出。此外，该技能不涉及动效设计、动效审查或 React Native 开发。