背景: 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)
}