不识别calc_微信小程序的calc不生效处理

博客讲述了在小程序开发中遇到的一个兼容性问题,即使用`calc`和`env(safe-area-inset-bottom)`在iOS和安卓上处理底部定位时的不同表现。在iOS上正常工作,但安卓上`bottom`值始终为0。解决方案是通过特定的样式写法实现兼容,即同时设置两个`bottom`属性,确保在安卓上能正确应用。此问题揭示了小程序中CSS计算属性在不同平台上的解析差异。
摘要由CSDN通过智能技术生成

大致文字初略的记录描述一下问题:外层是relative相对定位,内部一个view 需要绝对定位bottom的值为128rpx,同时还要兼容适配苹果x的底部,所以值是这样设置的:

bottom: calc(env(safe-area-inset-bottom) + 128rpx)

然而在安卓上bottom的值始终为0(在vconsole中查看了该元素),ios上是没有问题的。猜测:calc在安卓中不生效。

解决办法:样式写成这样:bottom:128rpx ;bottom: calc(env(safe-area-inset-bottom) + 128rpx) (注意前后顺序,不能更换)

分析: 第二个bottom中带有calc 在ios中会生效,所以会直接覆盖前面bottom。 然而在安卓中第二个bottom的值由于不能识别calc导致该值是不合法的,此时值无效,直接就是第一个bottom生效。

查了css中 bottom 不设置默认就是auto,父级元素有padding的话,会在content元素边界上,如果bottom值为0:就会在父级元素的padding边界上!但是在小程序中第二个bottom无效,直接采用了第一个bottom,该机制有点难理解。。。

仅以此记录小程序中一个诡异的小问题,写的粗略,没有截图代码啥的。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值