uniapp 打包后ios 显示不是全屏如何解决？

使用uniapp打包iOS应用后，发现页面没有全屏显示，上下都有黑边。请问该如何调整配置才能实现全屏效果？需要修改哪个配置文件或添加什么参数？

2 回复

在 manifest.json 的 app-plus 节点下添加：

"safearea": {
  "background": "#ffffff",
  "bottom": {
    "offset": "none"
  }
}

并检查页面 meta 标签 viewport 设置。


在 UniApp 中，iOS 打包后显示不是全屏的问题通常是由于未适配 iOS 的 Safe Area（安全区域）导致的。以下是解决方案：

1. 配置 manifest.json

在 manifest.json 中添加 iOS 安全区域适配配置：

{
  "app-plus": {
    "safearea": {
      "bottom": {
        "offset": "none"
      }
    }
  }
}

2. 修改页面样式

在页面的 CSS 中添加安全区域适配：

/* 使用 env() 函数适配安全区域 */
.page {
  padding-bottom: constant(safe-area-inset-bottom); /* 兼容 iOS < 11.2 */
  padding-bottom: env(safe-area-inset-bottom); /* 兼容 iOS >= 11.2 */
  min-height: 100vh;
}

3. 检查页面结构

确保页面根元素高度设置为 100%：

page {
  height: 100%;
}

4. 检查启动图配置

在 manifest.json 中确认启动图配置正确，避免启动图影响显示区域。

5. 重新打包

修改配置后，通过 HBuilderX 重新打包生成 IPA 文件。

注意事项：

  • 使用 env(safe-area-inset-bottom) 等环境变量时需确保 iOS 版本兼容
  • 测试时建议使用真机调试
  • 如果问题依旧，检查是否有第三方插件影响了布局

通过以上步骤，通常可以解决 iOS 打包后非全屏显示的问题。

回到顶部