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

Question

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

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

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

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);
}

Answer 2

您可以使用兼容的 Cordova 插件

cordova-plugin-safearea

npm i -D cordova-plugin-safearea
npx cap sync

安装后，您可以请求科尔多瓦/电容器桥上的安全边缘区域：

// Types for clarity
type SafeArea = {
  top: string,
  bottom: string,
}

window.plugins.safearea.get(
  (result: SafeArea) => {
    // elegantly set the result somewhere in app state
  },
  (error: any) => {
    // maybe set some sensible fallbacks?
  }
);

您可以使用这些值来指定正文或标题/底部菜单组件上的额外填充

文档说它以数字形式返回值，但在我看来它们实际上是字符串（在使用它们进行数学运算之前考虑 parseFloat）。

---

我刚刚在 React 中实现了这个（在 React.useLayoutEffect 中运行 getter）；该项目被封装在 Capacitor 中，并在两种具有不同巧妙的 Apple Notch 屏幕格式的 iOS 设备（iPhone 8 和 iPhone 11 Pro）上进行了测试。

请参阅文档了解更多信息https://github.com/rickgbw/cordova-plugin-safearea

Answer 3

我认为你可以像在任何普通网站中一样使用 env() 机制设置安全区域：

body {
    /* Other styles above... */
    padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}

（我使用的是没有 Ionic 的普通电容器应用程序。）