有一个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);
}

字符串

您可以使用兼容的Cordova插件cordova-plugin-safearea

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

字符串
安装了这个之后，您可以请求cordova/电容器桥上的安全裕度区域：

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

型
您可以使用这些值来指定主体上或标题/底部菜单组件上的额外填充
文档说它返回的值是Numbers，但在我看来它们实际上是字符串（在使用它们进行数学运算之前考虑parseFloat）。
我刚刚在React中实现了这一点（在React.useLayoutEffect中运行getter）;该项目被 Package 在Capacitor中，并在两个具有不同巧妙的Apple notch屏幕格式的iOS设备（iPhone 8和iPhone 11 Pro）上进行了测试。
有关详细信息，请参阅https://github.com/rickgbw/cordova-plugin-safearea上的文档

我认为你可以像在任何正常的网站使用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的普通电容器应用程序。