解决兼容苹果手机底部黑线的问题

关于解决兼容苹果手机底部黑线的几种方式

一般来说我们都是通过以下方式

margin-bottom: env(safe-area-inset-bottom);
margin-bottom: constant(safe-area-inset-bottom);

或者用内边距的方法给底部一个安全距离

padding-bottom: constant(safe-area-inset-bottom);
padding-bottom: env(safe-area-inset-bottom);

其实还有更好的解决方式如下

/*iphone,x,xs,11,12,13*/
@media only screen and (min-device-width: 375px) and (min-device-height: 812px) and (-webkit-device-pixel-ratio: 3) {
    .fixedRight {
        padding: $rem20 $rem28 $rem68 !important;
    }
}
/*iphone xr 11*/
@media only screen and (device-width: 414px) and (device-height: 896px) and (-webkit-min-device-pixel-ratio: 2) {
    .fixedRight {
        padding: $rem20 $rem28 $rem68 !important;
    }
}

以上的方法是以手机的屏幕来做的兼容适配 这种方法更值得推荐