带电容的ios webview，设置安全区域

Question

在 ios 中使用电容器构建应用程序。在 ios 中，webview 覆盖了整个屏幕，对于 iphone-x，这意味着将包含缺口并且内容将在其后面，如右图所示。但我想要左边的图片，“禁区”上的黑条。



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

我该如何解决这个问题？我可以在不改变电容器框架的情况下将 webview 更改为不覆盖整个屏幕吗？

Answer 1

例如，电容器预设了一个 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);
}