如何使用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));
}

垫水似乎不起作用。