【移动端适配一】移动端Web页面的ios安全区适配

背景

从苹果手机 iphoneX 发布之后，前端人员在开发移动端Web页面时，得多注意一个对 IOS 所谓安全区域范围的适配。这其实说白了就是 iphoneX 之后的苹果手机，在页面上，你需要对顶部和底部多预留一点空间。

造成这个问题的主要原因就是苹果手机在屏幕上出现了所谓的刘海屏，而且更是在屏幕下方加了一条小黑条。

我们上下预留的占位空间就是为了防止我们页面的内容被这些元素遮挡，但是如果你做的页面只是放在一些浏览器（微信内置浏览器）内传播，一般我们也不需要处理顶部刘海问题，顶部一般就是原生的标题栏了，不用我们管。但如果你的页面会被内嵌在 APP 展示且 APP 是全屏展示的，那么这个问题还是得处理一下。

下面我们分别介绍一下通过 CSS 和 JS 怎么去处理，根据场景你可以自行选择。

CSS

在 iOS11 新增特性中，Webkit 包含了两个新的函数 env() 和 constant()，以及四个预定义的常量：

• safe-area-inset-top：安全区域距离顶部边界距离，状态栏+导航栏大约为88px。
• safe-area-inset-left：安全区域距离左边边界距离，竖屏时为0。
• safe-area-inset-right：安全区域距离右边边界距离，竖屏时为0。
• safe-area-inset-bottom：安全区域距离底部边界距离，大约高度为34px。

我们可以这样子使用它们：

body{
    /* 兼容 iOS < 11.2 */
    padding-top: constant(safe-area-inset-top);
    padding-left: constant(safe-area-inset-left);
    padding-right: constant(safe-area-inset-right);
    padding-bottom: constant(safe-area-inset-bottom);
    /* 兼容 iOS >= 11.2 */
    padding-top: env(safe-area-inset-top);
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
    padding-bottom: env(safe-area-inset-bottom);
}

当然，你也可以在某个固定（fixed）在底部的元素上单独使用：

div{
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom);
}

JS

当然，有时候单纯的 CSS 方式并不能满足实际的需求场景，那么我们就需要判断出那些 IOS 的手机屏幕是需要特殊处理的。

而 iphoneX 之后的苹果手机 Series 参数如下：

机型 倍率 分辨率 pt

iPhone X 3 2436 × 1125 812 × 375
iPhone XS 3 2436 × 1125 812 × 375
iPhone XS Max 3 2688 × 1242 896 × 414
iPhone XR 2 1792 × 828 896 × 414

根据这些参数我们把苹果手机的长屏，也就是拿屏幕的高度用来当成判断条件：

/**
 * 判断IOS异形屏
 * @returns
 */
export function isIphoneX(){
  if (typeof window !== 'undefined' && window) {
    var faultTolerantVal = 10; // 容错值
    return /iphone/gi.test(window.navigator.userAgent) && (window.screen.height + faultTolerantVal) >= 812;
  }
  return false;
};