用途:让 Web UI 通过“像原生应用”的检验。资料指出,暴露网页身份的通常不是外观,而是滚动没有惯性、返回手势直接退出应用、键盘遮住输入框、主操作位置不符合平台习惯。因此应先修行为,再谈外观。
主要能力与原则:模仿行为而非外观,用 font-family: system-ui 让各平台提供自身字形;不劫持滚动,使用原生滚动配合 overscroll-behavior: contain 与 scroll-snap-type;平台返回手势只关闭一层,可关闭层打开时压入历史记录并用 history.back() 关闭;屏幕边缘留给系统手势识别器,可拖拽元素需内缩;用 visualViewport 解决键盘遮挡,配合 interactive-widget=resizes-content、navigator.virtualKeyboard.overlaysContent 与 env(keyboard-inset-height);PWA 需配置 display: "standalone"、background_color 与按配色方案的 theme-color;仅对界面外壳设 user-select: none,内容保持可选中;按平台显示并绑定修饰键(macOS 用 Cmd/metaKey,其他用 Ctrl/ctrlKey);采用平台确认与控件约定。
使用方式:先检测交付目标,读取 manifest,运行时用 matchMedia('(display-mode: standalone)') 判断而非嗅探 UA;若项目已有 usePlatform() 或 Capacitor.getPlatform() 则扩展它。具体平台约定查阅 references/platform-conventions.md。
适用场景:浏览器标签页、已安装 PWA、Capacitor/Tauri 外壳与 Electron 窗口等不同交付目标。
限制:资料未提供安装命令、收费、价格或效果数据;需在真实设备上以已安装应用形式测试,而非仅在浏览器标签页中验证。