css属性——env()和constant()设置安全区域,解决移动端小程序和H5底部栏 iPhoneX安全区域(Safe Area)底部小黑条在的屏幕适配
2022/9/2 1:22:54
本文主要是介绍css属性——env()和constant()设置安全区域,解决移动端小程序和H5底部栏 iPhoneX安全区域(Safe Area)底部小黑条在的屏幕适配,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
使用苹果官方推出适配方案css函数env()
、constant()
来适配
苹果官方推荐使用env()
,constant()
来适配,建议使用该方案,不需要管数值具体是多少。这2个方法是什么呢?
env()
和constant()
,是IOS11新增特性,Webkit的css函数,用于设定安全区域与边界的距离,有4个预定义变量:
safe-area-inset-left
:安全区域距离左边边界的距离safe-area-inset-righ
t:安全区域距离右边边界的距离safe-area-inset-top
:安全区域距离顶部边界的距离safe-area-inset-bottom
:安全距离底部边界的距离
因为目标是需要对底部小黑条做适配,所以只需要关注safe-area-inset-bottom
这个值。
而env()
和constant()
函数有个必要的使用前提,当网页设置viewport-fit=cover
的时候才生效,根据微信小程序的表现和我在实际真机测试时这两个函数生效,推测小程序里的viewport-fit
默认是cover
。
有一点要注意,在IOS11.2系统以前,可以使用constant()
函数,但是在IOS11.2系统以后,这个函数就被废弃了,被env()
函数替代了。
我们需要将viewport
设置为cover
,env
和constant
才能生效。设置代码如下:
<meta name="viewport" content="width=device-width...... viewport-fit=cover">
同时设置env
和constant
代码,同样env()
和constant()
需要同时存在,而且顺序不能换。
/* 可以通过增加padding-bottom来适配 */ padding-bottom: constant(safe-area-inset-bottom); /*兼容 IOS<11.2*/ padding-bottom: env(safe-area-inset-bottom); /*兼容 IOS>11.2*/ /* 可以通过margin-bottom来适配 */ margin-bottom: constant(safe-area-inset-bottom); margin-bottom: env(safe-area-inset-bottom); /* 或者改变高度*/ height: calc(50px + constant(safe-area-inset-bottom)); height: calc(50px + env(safe-area-inset-bottom));
这篇关于css属性——env()和constant()设置安全区域,解决移动端小程序和H5底部栏 iPhoneX安全区域(Safe Area)底部小黑条在的屏幕适配的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-03-30微信小程序的网络设置,及网络请求:wx.request(OBJECT)
- 2024-01-22基于taro搭建小程序多项目框架
- 2024-01-13小程序开发:在插件市场寻找步骤条组件并二开
- 2024-01-05钉钉小程序生态—企业机器人加互动卡片,改善用户体验的开始!
- 2023-12-29【UniApp】-uni-app-打包成小程序
- 2023-12-26性能翻倍!京东亿级体量小程序优化实践
- 2023-12-25小程序优化:第三方SDK过大解决方案
- 2023-11-26微信小程序文件预览和下载-文件系统
- 2023-11-2652天学习微信小程序计划No.2:注册小程序账号&安装开发者工具
- 2023-11-1952天学习微信小程序计划No.1:小程序简介