兼容IphoneXR、IphoneX、Iphone10+、Android刘海屏

前言：

刘海屏是苹果手机上一个显著的特征，对于前端开发人员来说，它可能会导致一些不兼容和显示问题。为了帮助大家更好地兼容适配苹果手机的刘海屏，我总结了一些前端技巧和方法，并将它们分享给大家。

1、 兼容 iOS < 11.2

@supports (top: constant(safe-area-inset-top)) {
    body{
        padding-top: constant(safe-area-inset-top);
    }
}
@supports (bottom: constant(safe-area-inset-bottom)) {
    .fixedFooter {
        padding-bottom: constant(safe-area-inset-bottom);  
    }
}

2、兼容 iOS >= 11.2
X、XR：375814*
(全屏刘海+吸底，两者都需要添加）
（非全屏，只有吸底按钮，需要单独给底部按钮加吸底安全距离）
先要加：

/* HTML*/
<meta name="viewport" content="width=device-width, viewport-fit=cover">
/*CSS*/
Body,html{
min-height: 100vh; //保证底部按钮固定在底部
}

• contain: 可视窗口完全包含网页内容（左图）
• cover：网页内容完全覆盖可视窗口（右图）
• auto：默认值，跟 contain 表现一致

注意：当 viewport-fit=contain 时 env() 是不起作用的，必须要配合 viewport-fit=cover 使用。对于不支持env() 的浏览器，浏览器将会忽略它。

（2-1）、底部吸顶按钮安全距离

@supports (bottom: constant(safe-area-inset-bottom)) or (bottom: env(safe-area-inset-bottom)) {
    .fixedFooter { 
        padding-bottom: env(safe-area-inset-bottom);
    }
  }

（2-2）、头部安全距离处理+底部有吸顶按钮：

@supports (top: constant(safe-area-inset-top)) or (top: env(safe-area-inset-top)) {
    body {
        padding-top: constant(safe-area-inset-top);
        padding-top: env(safe-area-inset-top);
    }
} 
@supports (bottom: constant(safe-area-inset-bottom)) or (bottom: env(safe-area-inset-bottom)) {
    body {
        padding-bottom: constant(safe-area-inset-bottom);
        padding-bottom: env(safe-area-inset-bottom);
    }
}

注意：
padding-bottom: constant(safe-area-inset-bottom); /* 兼容 iOS < 11.2 /
padding-bottom: env(safe-area-inset-bottom); / 兼容 iOS >= 11.2 */
env() 跟 constant() 需要同时存在，而且顺序不能换

3、Android刘海屏

/* HTML 最顶部加入两个盒子*/

<div class="safe-top"></div> 
<div class="nav-bar"></div>

/* CSS @baseSize: 75; //设计稿是2倍图时 */

.nav-bar {
   height: 148rem/@baseSize;
}
//解决ios和Android两个端刘海屏
@supports (bottom: constant(safe-area-inset-bottom)) or (bottom: env(safe-area-inset-bottom)) {
    body {
        padding-bottom: constant(safe-area-inset-bottom);
        padding-bottom: env(safe-area-inset-bottom);
    }
    .safe-top {
        height: calc(constant(safe-area-inset-top) - 148rem/@baseSize);
        height: calc(env(safe-area-inset-top) - 148rem/@baseSize);
    }
} 
@supports (bottom: constant(safe-area-inset-bottom)) or (bottom: env(safe-area-inset-bottom)) {
    .fixedFooter {
        padding-bottom: constant(safe-area-inset-bottom);
        padding-bottom: env(safe-area-inset-bottom);
    }
}

4、以下为拓展：
1、env() 和 constant()

iOS11 新增特性，Webkit 的一个 CSS 函数，用于设定安全区域与边界的距离，有四个预定义的变量：

• safe-area-inset-left：安全区域距离左边边界距离
• safe-area-inset-right：安全区域距离右边边界距离
• safe-area-inset-top：安全区域距离顶部边界距离
• safe-area-inset-bottom：安全区域距离底部边界距离 （小黑条的高度，横竖屏时值不一样）

2、fixed 元素的适配
这个方案需要吸底条必须是有背景色的，因为扩展的部分背景是跟随外容器的，否则出现镂空情况。

（1）、可以通过加内边距 padding 扩展高度：

@supports (bottom: constant(safe-area-inset-bottom)) or (bottom: env(safe-area-inset-bottom)) {
    button {
        padding-bottom: constant(safe-area-inset-bottom);
        padding-bottom: env(safe-area-inset-bottom);
    }
}

(2)、或者通过计算函数 calc 覆盖原来高度：

{
       height: calc(60px(假设值) + constant(safe-area-inset-bottom));
       height: calc(60px(假设值) + env(safe-area-inset-bottom));
   }

(3)、可以通过新增一个新的元素（空的颜色块，主要用于小黑条高度的占位），然后吸底元素可以不改变高度只需要调整位置，像这样：

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

空的颜色块

.empty{
    position: fixed;
    bottom: 0;
    width: 100%;
    height: constant(safe-area-inset-bottom);
    height: env(safe-area-inset-bottom);
    background-color: #fff;
  }

3、fixed 非完全吸底元素（bottom ≠ 0），比如 “返回顶部”、“侧边广告” 等

(1)、只是位置需要对应向上调整，可以仅通过外边距 margin 来处理：

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

(2)、也可以通过计算函数 calc 覆盖原来 bottom 值：

{
     bottom: calc(50px(假设值) + constant(safe-area-inset-bottom));
     bottom: calc(50px(假设值) + env(safe-area-inset-bottom));
 }

总之，处理苹果手机刘海屏的兼容性适配，需要我们前端工程师更加注意和细致入微。在这个过程中，我们可能会遇到各种各样的问题和挑战，但是只要我们不断学习、不断实践，就一定能够克服这些困难，让页面在苹果刘海屏上得到最好的展示效果。感谢大家的耐心阅读，如果有任何问题或者建议，欢迎在评论区留言。