Guide · 05 Mobile, Web & MiniProgram Hosts

移动端、Web WASM 与小程序宿主适配

一套 GPUI 视图无缝运行于 iOS、Android、HarmonyOS NEXT 以及浏览器 WebGPU/WebGL2 与小程序 WASM 容器，自动适配灵动岛、底部手势条、胶囊按钮安全区与响应式断点。

移动与 WASM 交叉编译目标矩阵

目标平台	Rust Target Triple	产物类型	原生图形宿主与渲染后端
iOS / iPadOS	`aarch64-apple-ios`	`staticlib`	UIKit + `CAMetalLayer` (Metal · ProMotion)
Android 10+	`aarch64-linux-android`	`cdylib`	`NativeActivity` + `ANativeWindow` (Vulkan / GLES3)
HarmonyOS NEXT	`aarch64-unknown-linux-ohos`	`cdylib`	ArkTS Native `XComponent` + `OHNativeWindow`
Web (Browser WASM)	`wasm32-unknown-unknown`	`cdylib` (`.wasm`)	`gpui_web` + HTML5 Canvas (WebGPU / WebGL2)
MiniProgram (小游戏/小程序)	`wasm32-unknown-unknown`	`cdylib` (`.wasm`)	WeChat / Douyin / Alipay WebGL2 Canvas + Canvas2D CJK Fallback

响应式断点与安全区 (`ResponsiveContext` & `SafeAreaInsets`)

gpux::ResponsiveContext 根据视口尺寸与运行平台自动推导 Breakpoint（Compact < 600px、Medium 600..1024px、Expanded >= 1024px），并携带 iOS 灵动岛、Android 状态栏或小程序右上角胶囊按钮的 SafeAreaInsets：

rust

use gpux::prelude::*;

let safe_area = SafeAreaInsets {
    top: 47.0,    // iOS Dynamic Island / HarmonyOS 状态栏避让
    right: 0.0,
    bottom: 34.0, // Home Indicator 手势条避让
    left: 0.0,
};

let ctx = ResponsiveContext::new(393.0, 852.0, safe_area);
assert_eq!(ctx.breakpoint(), Breakpoint::Compact);
assert!(ctx.is_mobile_layout());

Web WASM 与小程序宿主 (`gpux-web`)

在 Web 浏览器与微信/抖音/支付宝小程序中，gpux_web::WebBackend 默认开启 WebFontFallback::EmojiAndCjk，将中文字形与彩色 Emoji 交由宿主 Canvas2D 光栅化并上传至 GPU 纹理图集，无需在 WASM 包内内嵌 15MB+ 中文字体即可保持约 1.9 MB 的极致首屏体积：

rust

use gpux::prelude::*;
use gpux_web::{WasmHostKind, WebBackend, WebFontFallback};

// 1. 标准浏览器 DOM Canvas 宿主 (#gpux-canvas)
let web_host = WebBackend::new();
assert_eq!(web_host.font_fallback, WebFontFallback::EmojiAndCjk);

// 2. 微信小程序 WebGL2 宿主（自动注入 44pt 顶部胶囊安全区与 34pt 底部安全区）
let mp_host = WebBackend::miniprogram(WasmHostKind::WeChatMiniProgram);
assert_eq!(mp_host.kind(), PlatformKind::MiniProgram);