IOS全面屏底部安全区域优化

前言：

一、优化前：
1、优化背景：
1）如果需要通过左右滑动底部元素进行游戏，之前会出现元素重叠的情况，导致误触切换APP，中断活动
2）底部有导航栏的页面会出现按钮重叠的情况
2、使用媒体查询（微信开发者工具不支持媒体查询，只能真机调试）

二、优化后：
1、加大安全距离的高度，使得白色区域高度正好在黑色横条上部
2、使用env()和constant()函数
优点有2：
1）不用在媒体查询里面去适配不同机型
2）微信开发者工具可以进行调试

env()和constant()函数

一、使用前提：

H5网页设置viewport-fit=cover的时候才生效，小程序里的viewport-fit默认是cover

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

二、使用方法：

env()和constant()是IOS11新增特性，Webkit的css函数，用于设定安全区域与边界的距离，有4个预定义变量：

safe-area-inset-top
safe-area-inset-bottom
safe-area-inset-left
safe-area-inset-right  

constant： ios < 11.2  
env：ios >= 11.2  

三、JavaScript读取env函数

env这个方法只能用于css中，JavaScript是无法直接读取env函数的，如果要在JavaScript中读取env函数值，需要使用

CSS 自定义属性（变量）

自定义属性 (–*)：CSS 变量 – CSS（层叠样式表） | MDN

ps：当constant无法识别时，自定义变量就会变成一个字符串，所以在js内判断是否存在的时候注意下

🍦代码示例：

1、css中设置自定义属性

:root {
  --sat: env(safe-area-inset-top);
  --sar: env(safe-area-inset-right);
  --sab: env(safe-area-inset-bottom);
  --sal: env(safe-area-inset-left);
}

2、在JavaScript中，通过以下方法，读取到css自定义变量

getComputedStyle(document.documentElement).getPropertyValue("--sat")

四、谷歌浏览器内同样能识别env这个css函数

使用env的时候需要注意这个是否仅用在C端，或者B端是否和C端保持统一
👉举个栗子：
场景：我们的业务场景，活动可以在B端嵌入，C端打开
问题：因为这个函数我们是只需要用在ios内，去重新计算安全区域的高度，如果全局用在css的话，B端也可以识别，会导致B端内的高度不对。

解决方法：
使用css自定义变量，通过JavaScript读取env函数，存在且不为0时再去加上特殊类，css内针对特殊类设置env

步骤：
1、获取CSS自定义属性 constant(safe-area-inset-)、env(safe-area-inset-)，（在base.src.css设置的）

2、判断值是否存在且是否为0 (PC端打开是存在的，但是为0，这里是区分的关键)

var computedStyles = getComputedStyle(document.documentElement);
if (computedStyles) {
    var constantSab = computedStyles.getPropertyValue('--constantSab');
    var envSab = computedStyles.getPropertyValue('--envSab');
    if (
      (constantSab.includes('px') && envSab.trim() != '0px') ||
      (envSab.includes('px') && envSab.trim() != '0px')
    ) {
      ...业务代码...
    }
}

若有收获，就点个赞吧