【H5】IOS全面屏底部安全距离

背景： Iphonx等长屏手机底部的安全区

为了避免用户交互时，点击底部元素和区域受安全区影响需要在开发时注意样式的控制
以下内容来自文章：juejin.cn/post/722587...
重点：服务端是无法获取安全距离的，仅在客户端才能读取到

技术点：

env()和constant()

H5网页设置viewport-fit=cover的时候才生效，小程序里的viewport-fit默认是cover 需要在html文件里设置：

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

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

CSS 复制代码

- safe-area-inset-top 
- safe-area-inset-bottom  //默认34
- safe-area-inset-left 
- safe-area-inset-right 
- constant： ios < 11.2 
- env：ios >= 11.2

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

CSS自定义属性：（相关定义如下）

developer.mozilla.org/zh-CN/docs/... developer.mozilla.org/zh-CN/docs/...*

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

1、css中设置自定义属性

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自定义变量

js 复制代码

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

谷歌浏览器内使用：

使用css自定义变量，通过JavaScript读取env函数，存在且不为0时再去加上特殊类，css内针对特殊类设置env
判断值是否存在且是否为0 (PC端打开是存在的，但是为0，这里是区分的关键)

js 复制代码

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')) 
{ 
...业务代码... 
} 
}

如此原理，可以写一个C端获取安全距离的JS方法：
insertAdjacentHTML() 该方法将Element指定的文本解析为 HTML 或 XML，并将得到的节点插入到 DOM 树的指定位置。

js 复制代码

if (!process.env.Browser) {
return '0px' // 或者走服务端渲染可以返回 '34px'
}

if(!document.getElementbyId('__safeAreaBottom__') {
// 写一个全局的id

}

const saftAreaBottom = getComputedStyle(document.documentElement).getPropertyValue('--sab')

在开发时候，通过对元素配置安全距离的底部，例如自定义一个通用CSS样式

@mixin 指令允许我们定义一个可以在整个样式表中重复使用的样式。

@include 指令可以将混入（mixin）引入使用

css 复制代码

@mixin xxxPaddingBottom($height: 0px) {
padding-bottom: calc($heght)+constant(safe-area-inset-bottom)
padding-bottom: calc($heght)+env(safe-area-inset-bottom)
}