CSS安全区域属性在iPhone X上不起作用

Question

在我的情况下，我正在iPhone X上运行一个Web应用程序，我正在尝试使用Webkit padding-top: constant(safe-area-inset-top);的安全区域css属性将我的身体推到安全区域，并在{ {1}}。但是，Web视图无法正确评估这些属性，并且始终设置为0。 我该怎么做才能让它发挥作用！ 代码：

padding-top: env(safe-area-inset-top);

Answer 1

首先，在Mac上的Chrome和Safari上未定义safe-area-inset-dir，我怀疑您正在测量填充。据我所知，您必须在Safari中的iOS 11设备上加载该站点才能看到此变量具有任何价值。我怀疑这就是为什么你有0px填充问题。

此外，从iOS 11.2开始，要使用的关键字为env。事实上，iPhone X design guidelines引用了这个，甚至包括一个很好的完整示例来检测对它的支持：

@supports(padding: max(0px)) {
    .post {
        padding-left: max(12px, env(safe-area-inset-left));
        padding-right: max(12px, env(safe-area-inset-right));
    }
}

这种模式会为你做一些事情：

• 由于max不是标准CSS的一部分，我们知道我们在Safari / Webkit上，应该定义safe-area-inset-dir（其中dir是一个方向）。
• 此外，如果你在iPhone X上，这会将元素的填充设置为大多数设备上所需的“正常”填充（在这种情况下为12px）或所需的安全区域空间。这是因为iPhone 8上的iOS 11会将此变量定义为0，否则会导致填充0px。

Answer 2

需要

<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover"> 

HTML头部的

Answer 3

对于离子v3（或更低版本），它的工作原理就像是一种魅力：

将此添加到您的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">

然后在您的global.scss

.ion-app {
  --safe-area-inset-top: env(safe-area-inset-top);
  --safe-area-inset-bottom: env(safe-area-inset-bottom);
  height: calc(100% + (var(--safe-area-inset-top) + var(--safe-area-inset-bottom)));
}

ionic v4和更高版本中的该问题似乎已经解决。

Answer 4

没有线 padding-top：env（safe-area-inset-top）; 它应该工作