ios - 带有电容的iOS WebView，设置安全区域

使用电容器在ios中构建应用程序。在ios中，Webview覆盖了整个屏幕，对于iphone-x而言，这意味着将包括该凹口，并且内容将位于凹口的后面，如右图所示。但是我想要左边的图片，“禁止进入的区域”上有黑色的条。

预期的解决方案(html/css)将是设置正确的视口(viewport)并使用'safe-area'insert-？'，例如:https://css-tricks.com/the-notch-and-css/
但是对于ios中的webview，“安全区域”插入将始终为0，这就是它的工作方式=>此解决方案没有用。

我该如何解决？我可以在不更改电容器框架的情况下将网络 View 更改为不覆盖整个屏幕吗？

最佳答案

有一个由电容器预设的CSS变量，您可以使用它来设置填充或边距。

html {
    --ion-safe-area-top: env(safe-area-inset-top);
    --ion-safe-area-bottom: env(safe-area-inset-bottom);
    --ion-safe-area-left: env(safe-area-inset-left);
    --ion-safe-area-right: env(safe-area-inset-right);
}

关于ios - 带有电容的iOS WebView，设置安全区域，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/57329955/