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

Question

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

预期的解决方案（html/css）是设置正确的视口并使用“安全区域”插入-？”，se：https ://css-tricks.com/the-not-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);
}