【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)
}
相关推荐
lecepin34 分钟前
AI Coding 资讯 2025-09-17
前端·javascript·面试
IT_陈寒37 分钟前
React 18实战:7个被低估的Hooks技巧让你的开发效率提升50%
前端·人工智能·后端
树上有只程序猿1 小时前
终于有人把数据库讲明白了
前端
猩兵哥哥1 小时前
前端面向对象设计原则运用 - 策略模式
前端·javascript·vue.js
司宸1 小时前
Prompt设计实战指南:三大模板与进阶技巧
前端
RoyLin1 小时前
TypeScript设计模式:抽象工厂模式
前端·后端·typescript
华仔啊1 小时前
Vue3+CSS 实现的 3D 卡片动画,让你的网页瞬间高大上
前端·css
江城开朗的豌豆2 小时前
解密React虚拟DOM:我的高效渲染秘诀 🚀
前端·javascript·react.js
vivo互联网技术2 小时前
拥抱新一代 Web 3D 引擎,Three.js 项目快速升级 Galacean 指南
前端·three.js