如何在 Capacitor iOS (WKWebView) 中将安全区域设置为黑色？

Question

我正在尝试将我的 Capacitor iOS 应用程序中的安全区域（凹口区域、主页指示器）着色为黑色。该应用程序在底层使用 WKWebView。

但是，我仍然在 WKWebView 中看到白色安全区域，这是在 iPhone 模拟器上模拟的。主要内容区域如预期为黑色，但凹口区域和底部安全区域仍为白色。我更想知道文档和技巧的链接，以真正理解这个问题，而不是任何人只是写出代码（尽管这也会有帮助）。我浏览了 Capacitor 文档，发现了有关 StatusBar (@capacitor/status-bar) 的内容，但没有找到其他内容。我可能会遗漏一些东西，但我对此很陌生，我很难完全理解。

任何帮助将非常非常感谢。我特别想在整个应用程序中保持一致的黑色背景，包括安全区域。

我附上了一些图片，这些图片是一直滚动到上、左、右、下的结果。

一直滚动到顶部

一直向左滚动
一直向右滚动

一直向下滚动

我尝试过的：

1. 添加了视口元标记：

<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">

Added CSS in index.css:

cssCopybody {
  background-color: black;
}


body, html {
  width: 100vw;
  height: 100vh;
}

在capacitor.config.json中设置背景颜色：

jsonCopy{
  "ios": {
    "backgroundColor": "#000000"
  }
}

Answer 1

我通过修改电容器.config.ts 文件实现了这一点

   webDir: 'build',

ios: {

contentInset: 'always',

},

backgroundColor: '#078fd0',

};

export default config;

只需添加背景颜色即可。希望它也适合你:)