手机端兼容iPhoneX刘海屏

顶部安全距离

iOS11 iPhoneX constant(safe-area-inset-top) = 88px

iOS11 其他机型 constant(safe-area-inset-top) = 64px

iOS10 及以下版本和安卓不识别 constant(safe-area-inset-top)

需要先设置一下meta标签

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

// 64 为 iOS header 的高度
.ac-container {
  // 默认值
  padding-top: 0;
  // iOS 11- iOS11.2
  padding-top: calc(~'constant(safe-area-inset-top) - 64px'); 
  // >= iOS11.2
  padding-top: calc(~'env(safe-area-inset-top) - 64px'); 
}

不识别 constant(safe-area-inset-top) 和 calc 的设备 padding-top 为默认值 0

iOS11 iPhoneX padding-top 计算得到 24px，即齐刘海高度

iOS11 其他机型 padding-top 计算也得到的是 0px

底部安全距离

iOS11 iPhoneX constant(safe-area-inset-bottom) = 34px

iOS11 其他机型 constant(safe-area-inset-bottom) = 0px

iOS11 及以下版本和安卓不识别 constant(safe-area-inset-bottom)

// 如果默认值不为 0，需要加上默认值
.ac-container {
  // 默认值
  padding-top: 10px;
  // iOS 11- iOS11.2
  padding-top: calc(~"44 *(constant(safe-area-inset-bottom) / 34)");; 
  // >= iOS11.2
  padding-top: calc(~"44 * (env(safe-area-inset-bottom) / 34)");; 
}

env() 方法是在 iOS11 中被支持的，一开始他被命名为 constant()。在 Safari Technology Preview 41 and the iOS 11.2 beta的版本中支持，constant() 已经被重命名为 env()。我们可以使用 css 的 fallback 机制来适配所有的版本，如果有必要的话，我们可以提前使用 env() 来适配。

左右安全距离

.container {
    padding: 12px;
  // 左右安全距离
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
}

当使用了安全区域变量，并不能解决所有的问题。比如，上面的页面，当横屏的时候， env(safe-area-inset-left) 是有值的，当竖屏的时候，env(safe-area-inset-left)=0px，此时，文本就会挤到屏幕的边缘了。

为了解决这个问题，其实是需要给 padding 设置一个默认值，当 safe-area-inset-left 有值的时候，设置成 safe-area-inset-left，没值的时候使用默认值。我们可以使用一组新的 css 函数 min() and max()来解决这个问题。这2个函数可以接受任意个数的参数，并返回最大或者最小的那个。他们也可以用到 calc()中，也可以相互嵌套使用。

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

注意：@supports 语句可以检查是否支持 max，但不要在其中使用变量，例如：@supports(padding: max(env(safe-area-inset-left)))，因为 css 对待无效的变量是返回默认值，也就是这个例子中的padding的初始值。css-variables

在上述的示例中，当竖屏时， env(safe-area-inset-left) 是 0，所以 max 函数返回了 12px。当横屏时，env(safe-area-inset-left) 的值会大于 12，所以，max函数会返回 env(safe-area-inset-left) 的值。这就保证了页面的动态适应性。