移动端轻量演示是跨行业的"短平快"场景：销售外勤、活动 H5、产品微页、扫码引流、社交分享。本节聚焦如何用玄武屏适配手机 / 微信 / 小程序场景。

应用场景

1. 销售外勤

销售用手机给客户演示：

• 在地铁 / 出租车 / 客户办公室
• 没法用 PC 投影
• 玄武屏手机端直接讲

2. 活动 H5

营销活动页：

• 公众号 / 短信引流
• 互动 H5 替代静态页
• 数据回收（详见「66. 游戏化营销方案」）

3. 产品微页

产品介绍替代静态详情页：

• 互动产品演示
• 用户可操作 demo
• 加购 / 留资数据

4. 扫码引流

线下展品 / 商品扫码 → 手机看详情：

• 博物馆展品
• 商场商品
• 楼盘户型

5. 社交分享

朋友圈 / 群聊分享：

• 演示链接转发
• 可在微信内打开
• 优雅降级（不支持 fullscreen）

移动端的特殊考虑

1. 屏幕小

屏幕	适配
5.5–6.5 寸（标准）	优化
6.5+ 寸（折叠展开）	适配
7–10 寸（小平板）	充分

2. 触屏交互

• 手指点击为主
• 上滑 / 左右滑常用手势
• 双指缩放
• 不假设有键盘

3. 网络不稳

• 4G / 5G 切换
• 弱网降级
• 离线缓存

4. 浏览器限制

• iOS Safari 限制（无 fullscreen API）
• 微信内浏览器
• 小程序 webview

玄武屏移动端能力

自动适配

逻辑画布尺寸不变，按手机屏幕等比缩放：

• 默认 1280×720（横屏）→ 手机竖屏看也 OK
• 可专门做 720×1280（竖屏）版本

触屏优化

• 按钮变大
• 隐藏复杂工具栏
• 主要操作上滑出现

自动横屏

部分场景强制横屏：

"演示设置 → 移动端 → 强制横屏"

用户竖握手机时弹"请横屏观看"。

手势识别

• 单击 = 翻下一页
• 双击 = 进入交互模式
• 上滑 = 大纲视图
• 双指捏合 = 缩放画布

微信内适配

微信内浏览器有限制：

• 无 requestFullscreen API
• 无视频自动播放（部分版本）
• 部分高级 CSS 特性不支持

玄武屏自动检测微信环境，做降级：

• 隐藏全屏按钮
• 视频改为点击播放
• CSS 动画用 fallback

小程序版

正在开发中：

• 微信小程序版（仅观看模式）
• 支付宝小程序版（仅观看模式）
• 抖音 / 快手小程序

详见「87. 产品路线图」。

PWA 离线版

加桌面图标后可离线：

• 安装到手机桌面
• 离线访问已加载的演示
• 无需 App Store

性能优化（移动端）

资源裁剪

• 图片：手机端用 WebP 压缩
• 视频：自动选低码率版本
• GGB / HTML：移动端可禁用

懒加载

• 图片懒加载（视口外不加载）
• 视频按需加载

预算

资源	移动端预算
单页图片	< 5
单页视频	≤ 1
GGB / HTML	慎用（不超 1）
总素材	< 30MB

详见「84. 性能配置与调优」。

跨行业用法

行业	移动端用法
教育	学生手机看课件、做练习
企业销售	销售外勤即时演示
医疗	患者手机看科普 / 复诊预约
建筑	客户手机看楼盘
博物馆	访客扫码看展品
政务	政策一键查询
营销	H5 + 公众号引流

落地案例（脱敏）

案例 1：某汽车保险销售

• 销售用手机给客户讲条款
• 互动比静态保单更易理解
• 成单率提升 25%

案例 2：某医院健康教育

• 患者扫码看健康科普
• 配合 AI-5 数字人医生讲解
• 满意度显著提升

案例 3：某博物馆数字导览

• 访客扫展品二维码
• 手机看 3D 模型 + 多语种讲解
• 解放讲解员压力

移动端定价

• 移动端能力包含在所有版本
• 没有单独的"移动端定价"
• 微信小程序版可能单独计费

与原生 App 对比

维度	玄武屏 H5	原生 App
安装	不需要	需要
更新	即时	App 商店审核
性能	中（受浏览器限制）	高
分发	链接传播	App 商店
适合	短期、低频、社交	长期、高频

设计原则（移动端专属）

1. 简洁

每页 ≤ 5 个元素。

2. 大字号

≥ 16px。

3. 大按钮

≥ 44×44px（苹果指南）。

4. 单手操作

重要按钮在拇指可达区。

5. 加载提示

慢网下显示进度。

下一节讲出海与多语种方案。