多平台适配指南

本文档详细介绍了微应用如何在各平台中适配，确保微应用获得最佳的用户体验。

1. PC 端适配指南

环境要求

在开始适配前，请确保满足以下环境要求：

组件	最低版本要求
MosApp PC 版本	≥ 1.30.x
JS-SDK 版本	≥ 1.1.4

界面展示模式

竖屏模式 (Portrait)

窗口尺寸: 414px × 780px（宽 × 高）

---

横屏模式 (Landscape)

窗口尺寸: 969px × 589px（宽 × 高）

---

布局介绍

PC 端的界面展示与移动端基本保持一致

状态栏（红色区域）

• 高度: 通过 mos.getWindowInfo() API 获取，单位为像素，在 PC 端固定为 20px
• 位置: 固定在页面顶部
• 功能: 用户可拖动状态栏来调整窗口位置

标题栏（黄色区域）

• 高度: 固定 44px
• 内容: 由开发者自定义
• 胶囊按钮: 右侧固定显示
  • 宽度: 88px
  • 右边距: 20px
  • 注意: 开发者需要预留足够的位置，避免内容被胶囊按钮遮挡

---

配置文件说明

config.json 是微应用的全局配置文件，用于设置横竖屏显示模式

{
    "deviceOrientation": "portrait"
}

配置参数说明

参数	描述	可选值	默认值
deviceOrientation	显示方向	portrait（竖屏）, landscape（横屏）	portrait

---

适配最佳实践

1. 响应式布局

建议使用响应式设计，确保应用在不同尺寸下都能正常显示。

2. 操作交互

平台已将鼠标左键默认适配 Touch 事件，无需额外配置。

---

常见问题

Q: 如何检测当前运行环境是PC端？

A: 可以通过JS-SDK提供的API检测运行环境：

// 示例代码
if (window.mos) {
  window.mos.getAppBaseInfo().then((info) => {
    if (info.platform === 'WINDOWS' || info.platform === 'MAC' || info.platform === 'LINUX') {
      // PC端特定逻辑
    }
  })
  
}

Q: 胶囊按钮会遮挡内容怎么办？

A: 确保主要内容区域距离右侧至少有108px（88px按钮宽度 + 20px边距）的安全距离。