如何使用 ionic 5 和电容器 3 修复 ios 缺口问题？

Question

为了修复应用程序在缺口下的问题，我尝试了几种方法，但无济于事

• 将以下内容添加到index.html

<meta name="viewport"
  content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>

• 添加以下 CSS

@supports (padding: max(16px)) {
  body {
    padding: env(safe-area-inset-top) env(safe-area-inset-right)
                env(safe-area-inset-bottom) env(safe-area-inset-left);
        }
    }

Answer 1

尝试在 global.scss 文件中添加以下内容：

body {
    margin-top: constant(safe-area-inset-top);
    margin-top: env(safe-area-inset-top);
    margin-bottom: calc(4px + env(safe-area-inset-top));
}

填充似乎不起作用。