uniapp div设置底部安全距离

uniapp yekong

在uni-app中设置底部安全距离,可以通过CSS样式来实现。例如,如果你想为一个元素设置底部安全距离,可以使用如下CSS代码:

.jiange {
    position: relative;
    height: 80rpx;
    padding-bottom: constant(safe-area-inset-bottom); /* 兼容iOS < 11.2 */
    padding-bottom: env(safe-area-inset-bottom); /* 兼容iOS 11.2及以上 */
}

这里.jiange类用于设置元素的位置和高度。padding-bottom属性用于添加底部的安全距离,其中constant(safe-area-inset-bottom)env(safe-area-inset-bottom)是用来兼容不同版本的iOS系统的,确保在有“刘海”或其他屏幕特性的设备上内容也能正确显示,不被遮挡。

flex方式设置安全距离

.submit {
    width: 690rpx;
    height: 88rpx;
    background: #4785FF;
    border-radius: 10rpx;
    position: fixed;
    bottom: calc(84rpx + env(safe-area-inset-bottom)); /* 动态计算底部距离 */
    left: 30rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: nowrap;
    flex-direction: row;
    align-content: flex-start;
    font-family: AppleSystemUIFont;
    font-size: 32rpx;
    color: #FFFFFF;
}
喜欢