兼容问题---ios底部的安全距离css设置

在H5上适配安全区域: 采用viewport+env+constant方案。

具体操作如下:

  1. 需要将viewport设置为cover,env和constant才能生效。设置代码如下:
javascript 复制代码
<meta name="viewport" content="width=device-width,initial-scale=1.0,viewport-fit=cover">
  1. 同时设置env和constant代码,同样env()和constant()需要同时存在,而且顺序不能换。

这里不一定用padding-bottom可以是margin-bottom设置,具体看实际情况!

javascript 复制代码
@supports
(bottom: constant(safe-area-inset-bottom))
or (bottom: env(safe-area-inset-bottom)) {
.盒容器类名 {
padding-bottom: constant(safe-area-inset-bottom);
padding-bottom: env(safe-area-inset-bottom);
}
}
  1. 注意事项:

有一点要注意,在IOS11.2系统以前,可以使用constant()函数,但是在IOS11.2系统以后,这个函数就被废弃了,被env()函数替代了。

所以我们在做屏幕适配时,需要这样写:

javascript 复制代码
padding-bottom: constant(safe-area-inset-bottom); /*兼容 IOS<11.2*/
padding-bottom: env(safe-area-inset-bottom); /*兼容 IOS>11.2*/ 
相关推荐
gnip7 小时前
企业级配置式表单组件封装
前端·javascript·vue.js
一只叫煤球的猫8 小时前
写代码很6,面试秒变菜鸟?不卖课,面试官视角走心探讨
前端·后端·面试
excel9 小时前
Three.js 材质(Material)详解 —— 区别、原理、场景与示例
前端
掘金安东尼9 小时前
抛弃自定义模态框:原生Dialog的实力
前端·javascript·github
hj5914_前端新手13 小时前
javascript基础- 函数中 this 指向、call、apply、bind
前端·javascript
薛定谔的算法13 小时前
低代码编辑器项目设计与实现:以JSON为核心的数据驱动架构
前端·react.js·前端框架
Hilaku13 小时前
都2025年了,我们还有必要为了兼容性,去写那么多polyfill吗?
前端·javascript·css
yangcode13 小时前
iOS 苹果内购 Storekit 2
前端
LuckySusu13 小时前
【js篇】JavaScript 原型修改 vs 重写:深入理解 constructor的指向问题
前端·javascript
LuckySusu13 小时前
【js篇】如何准确获取对象自身的属性?hasOwnProperty深度解析
前端·javascript