【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)
}
相关推荐
Mr_Xuhhh29 分钟前
重生之我在学环境变量
linux·运维·服务器·前端·chrome·算法
永乐春秋1 小时前
WEB攻防-通用漏洞&文件上传&js验证&mime&user.ini&语言特性
前端
鸽鸽程序猿1 小时前
【前端】CSS
前端·css
ggdpzhk1 小时前
VUE:基于MVVN的前端js框架
前端·javascript·vue.js
小曲曲2 小时前
接口上传视频和oss直传视频到阿里云组件
javascript·阿里云·音视频
学不会•4 小时前
css数据不固定情况下,循环加不同背景颜色
前端·javascript·html
EasyNTS4 小时前
H.264/H.265播放器EasyPlayer.js视频流媒体播放器关于websocket1006的异常断连
javascript·h.265·h.264
活宝小娜6 小时前
vue不刷新浏览器更新页面的方法
前端·javascript·vue.js
程序视点6 小时前
【Vue3新工具】Pinia.js:提升开发效率,更轻量、更高效的状态管理方案!
前端·javascript·vue.js·typescript·vue·ecmascript
coldriversnow6 小时前
在Vue中,vue document.onkeydown 无效
前端·javascript·vue.js