收藏
回答

上传自动压缩样式导致兼容性问题,求解?

今天测试一个版本的时候发现有一台手机的显示效果和其他手机不同,css的padding没有生效,随后测试发现样式代码压缩把一些兼容代码给压缩了。

height:100rpx;
height:calc(100rpx + env(safe-area-inset-bottom));
padding:20rpx;	
padding-bottom:calc(20rpx + env(safe-area-inset-bottom));


这样写的目的是当iOS <= 10的手机用户访问可以以height:100rpx;padding:20rpx来生效,当iOS > 10时判断是否有安全区域。

代码上传样式压缩功能开启后生成的代码为

height:100rpx;
height:calc(100rpx + env(safe-area-inset-bottom));
padding:20rpx 20rpx calc(20rpx + env(safe-area-inset-bottom));


padding被合并了,导致iOS <= 10的用户的padding不生效了,整个样式都乱了。

求解是否有其他方案?除了wx.getSystemInfo拿版本号来写style,有其他办法么?最好是可以开启样式压缩的情况下,用css解决。

最后一次编辑于  2020-11-25
回答关注问题邀请回答
收藏

1 个回答

  • 硬橙小路
    硬橙小路
    2020-11-25

    身边没有iPhoneX真机,用了

    .class {
        padding-bottom:20rpx;
    }
    @supports (bottom:env(safe-area-inset-bottom)){
        .class {
            padding-bottom:calc(20rpx + env(safe-area-inset-bottom));
        }
    }
    


    模拟器调不出效果,看到的还是20rpx。这样iOS10及以下的问题解决了,iPhoneX不知道显示效果对不对。

    2020-11-25
    有用
    回复
登录 后发表内容
问题标签