最优雅的解决env(safe-area-inset-bottom)底部安全距离在安卓中为0的问题

已于 2023-12-14 00:04:12 修改
阅读量1.3k 收藏 7
点赞数 14
文章标签： css javascript css3 前端 前端框架
于 2023-12-13 23:57:55 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/knight_ssssss/article/details/134985013
版权

​

最优雅的解决方法

使用css自带的max()方法，该方法默认取最大值


padding-bottom: max(env(safe-area-inset-bottom), 24rpx);

这样安卓为0时，此时max函数的最大值为24rpx，所以会自动适配为24rpx

补充一点，最近发现在不同的sass版本中会有以下报错

在这里插入图片描述
​​
这是因为sass编译机制造成的

所以提供以下解决方法


padding-bottom: Max(env(safe-area-inset-bottom), 24rpx);

因为我们知道是sass编译导致的问题，所以我们把小写的max改为Max，在css中大小写不分，所以该Max的函数会被正常编译

​

knight_ssssss
关注
  • 14
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
postcss-safe-area:为安全区域环境变量添加浏览器后备
05-14
PostCSS安全区域 插件，为安全区域env变量添加浏览器后备。 旧的iOS和Android浏览器不支持CSS安全区域所需的环境变量。 该插件添加了所有必要的后备，并支持calc()以及多个边距或填充值的简写属性。 . foo { padding-top : env (safe-area-inset-top); margin : 5 em 5 em calc ( 5 em + env (safe-area-inset-bottom)) 5 em ; } . foo { padding-top : 0 ; padding-top : constant (safe-area-inset-top); padding-top : env (safe-area-inset-top); margin : 5 em 5 em calc ( 5 em + 0 px ) 5 em
iPhoneX安全区域(Safe Area)底部小黑条在微信小程序和H5的屏幕适配 ...
03-29
最近写小程序时，遇到了 iPhoneX 底部小黑线与内容重叠的问题，实际上是iPhoneX安全区域的适配问题，了解清楚这个问题花了挺多时间的，也实操出了结果，忍不住来总结总结。 本文目录 前言 · 内容与小黑线重叠情况...
Android设置底部距离,【报Bug】底部安全距离env(safe-area-inset-bottom)，编译到Android机无法识别...
weixin_31328555的博客
05-26 1万+
详细问题描述示例一：自定义tabBarpage{width: 100%;height: 50px;position: fixed;botttom: env(safe-area-inset-bottom);background-color: #108ee9;}编译到IOS端，正常显示为：固定在底部安全距离之上的tab条编译到Android机器，fixed布局失效，悬浮在顶部示例二：自定义全屏遮罩pa...
uniapp APP样式兼容性问题
最新发布
miyunie3964的博客
05-31 346
苹果机型不支持使用1rpx dashed，虚线最少需要设置为2rpx，否则真机运行时线条会消失；
小程序进阶-env(safe-area-inset-bottom)的使用
weixin_43166227的博客
09-04 3998
env(safe-area-inset-bottom)和env(safe-area-inset-top)是CSS中的变量，用于获取设备底部和顶部安全区域的大小。所谓的安全区域就是指在iPhone X及以上的设备中，为避免被屏幕的“刘海”和“Home Indicator”所遮挡或者覆盖的有效区域区域，以确保内容在安全区域内显示。
env(safe-area-inset-bottom)解决ios底部小黑线遮挡问题
热门推荐
郊眠寺
01-04 1万+
最近还整理一份JavaScript与ES的笔记，一共25个重要的知识点，对每个知识点都进行了讲解和分析。能帮你快速掌握JavaScript与ES的相关知识，提升工作效率。
关于env(safe-area-inset-bottom)的兼容问题
anwebDesigner的博客
09-21 7510
env(safe-area-inset-bottom)兼容性问题，避坑指南。
移动端安卓/苹果，tabbar安全区设置
qq_43610311的博客
11-17 1323
移动端安卓/苹果，tabbar安全区设置
css 安全区域 safe-area-inset-
sayyy的专栏
02-15 6585
略
解决env(safe-area-inset-bottom)安卓底部为0的问题
knight_ssssss的博客
12-04 700
最优雅的解决env(safe-area-inset-bottom)安卓底部为0的问题
env()和constant()设置安全区域
qq_52507367的博客
06-30 5530
env()和constant()设置安全区域
darabonba-env-0.1.1.jar
10-09
阿里云短信接口所需 darabonba-env-0.1.1.jar
safe-relay-service:中继Tx服务以确保Gnosis安全
03-17
Gnosis安全中继服务这项服务使我们可以拥有安全合同的所有者，而这些所有者地址上不需要保留任何ETH。 这怎么可能？ 交易中继服务充当代理，支付交易费用并由于我们使用的交易体系结构而将其取回。 它还使用户能够...
详解Vue-cli3 项目在安卓低版本系统和IE上白屏问题解决
10-17
在使用 Vue-cli3 创建的项目中，可能会遇到在安卓低版本系统或 Internet Explorer（IE）浏览器上出现白屏的问题。这通常是由于这些老旧平台不支持 ES6 以上的语法和某些新特性导致的。为了解决这个问题，我们需要...
移动端设备底部安全区
qq_34856863的博客
11-09 438
解决IOS底部安全区域问题
Android webview 69,android-9.0-pie-env(safe-area-inset-top)无法在Android Pie WebView 69上运行
weixin_35562134的博客
05-26 876
在Chrome 69中引入了对env()常量的支持.虽然我观察到的行为与iOS不同.在iPhone 8屏幕上没有凹口env(安全区域插入顶部)等于20px,而在Moto G屏幕上,没有凹口,它等于0.作为一种解决方法,我正在使用此函数在页面加载时将类设置为正文：/*** Android save-area env variables behave differently from iOS ones...
uniapp开发小程序 小米手机真机bottom:0无效 底部间隙 设备安全区域处理办法
xyphf的博客
10-27 1312
uniApp 小程序bottom:0无效 下面有间隙 设备安全区域
Android webview 69,env(safe-area-inset-top) not working on Android Pie + WebView 69
weixin_39784263的博客
05-26 950
问题I have a fullscreen cordova app, I used to use the css below for iPhone X's notch,padding-top: 25px;padding-top: env(safe-area-inset-top);and Android will ignore env(safe-area-inset-top), and use 25...
微信小程序、H5 （IOS 底部适配）safe-area-inset-bottom
吴冬雪的博客
03-07 4305
需要将viewport设置为cover，env和constant才能生效。因为现在的ios全面屏底部有小黑线，位于底部的元素会造成黑线的阻挡，可以使用。auto：默认值，此值不影响初始布局视图端口，并且整个web页面都是可查看的。tips: 记得先使用constant 再使用 env。在lang="stylus"中 前面需要加~contain：可视窗口完全包含网页内容。cover：网页内容完全覆盖可视窗口。
env(safe-area-inset-bottom 与 calc 组合加PX
09-06
### 回答1： env(safe-area-inset-bottom) 是一个 CSS 变量，用于获取设备的底部安全区域的高度。 calc 是 CSS 的一个函数，用于计算表达式的值。它允许你在 CSS 中执行简单的计算，例如加减乘除。 当 env(safe-area-inset-bottom) 与 calc 组合使用时，你可以使用它来计算使用设备底部安全区域高度的像素值。例如，你可以使用以下代码设置底部边距为设备底部安全区域高度的一半： ```css margin-bottom: calc(env(safe-area-inset-bottom) / 2); ``` 或者，你可以使用以下代码设置底部边距为设备底部安全区域高度加 10 像素： ```css margin-bottom: calc(env(safe-area-inset-bottom) + 10px); ``` ### 回答2： env(safe-area-inset-bottom) 是一个 CSS 函数，用于在响应式布局中自适应地获取安全区域（例如 iPhone X 及以上新款手机的刘海屏或非矩形屏幕部分）底部的安全间距。而 calc 是 CSS 中的计算函数，用于在样式中进行算术运算。这两个函数可以结合使用来实现一些特定的布局需求。 通过 `calc(env(safe-area-inset-bottom) + 20px)` 这样的组合方式，我们实际上是在获取底部安全区域的高度（env(safe-area-inset-bottom)），并将其与 20px 进行加法运算。 假设 env(safe-area-inset-bottom) 的返回值为 34px，则计算结果为 `calc(34px + 20px)`，最终的结果将是 54px。 这种组合使用可以应用于需要相对于安全区域底部添加固定间距的布局，以确保页面内容不会被安全区域遮挡。通过动态计算 env(safe-area-inset-bottom) 的值，可以实现在不同设备上的自适应布局，确保在不同手机屏幕上都能正确显示。 需要注意的是，这种组合只适用于支持 CSS 属性 env() 和 calc() 的浏览器。在一些旧版本浏览器中，可能无法正常解析和应用这种组合。因此，在实际应用中，需要根据目标用户群体的设备情况，考虑兼容性问题，以及提供合适的备用方案。 ### 回答3： env(safe-area-inset-bottom) 是 CSS 中的一个变量，用于获取设备底部的安全区域的大小。在不同的设备上，安全区域的大小可能会有所不同，因此使用这个变量可以确保元素与底部的安全区域保持一定的距离。 calc 是 CSS 中的一个函数，用于进行数值计算。在这里，可以使用 calc() 函数将 env(safe-area-inset-bottom) 的值与指定的像素值进行计算，从而得到一个新的数值。 例如，如果想要一个元素与底部安全区域保持 20 像素的距离，可以使用如下代码： .bottom-element { margin-bottom: calc(env(safe-area-inset-bottom) + 20px); } 在这个例子中，calc() 函数将 env(safe-area-inset-bottom) 的值和 20px 进行相加，得到一个新的数值，然后将这个数值应用到元素的 margin-bottom 属性上。这样，无论设备的底部安全区域的大小如何，元素与底部安全区域的距离始终保持为 20 像素。 需要注意的是，这种组合使用只能在支持这两种特性的浏览器中生效，而且需要正确的语法和用法。因此，在使用时需要确保浏览器的兼容性，并仔细检查代码的正确性。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值