【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)
}
相关推荐
秦jh_3 分钟前
【Linux】多线程(概念,控制)
linux·运维·前端
蜗牛快跑21316 分钟前
面向对象编程 vs 函数式编程
前端·函数式编程·面向对象编程
Dread_lxy17 分钟前
vue 依赖注入(Provide、Inject )和混入(mixins)
前端·javascript·vue.js
涔溪1 小时前
Ecmascript(ES)标准
前端·elasticsearch·ecmascript
榴莲千丞1 小时前
第8章利用CSS制作导航菜单
前端·css
奔跑草-1 小时前
【前端】深入浅出 - TypeScript 的详细讲解
前端·javascript·react.js·typescript
羡与1 小时前
echarts-gl 3D柱状图配置
前端·javascript·echarts
guokanglun1 小时前
CSS样式实现3D效果
前端·css·3d
咔咔库奇2 小时前
ES6进阶知识一
前端·ecmascript·es6
前端郭德纲2 小时前
浏览器是加载ES6模块的?
javascript·算法