2***@qq.com
2***@qq.com
  • 发布:2019-10-16 15:17
  • 更新:2021-12-18 15:28
  • 阅读:19193

小程序包括uniapp针对安全区域env(safe-area-inset-*)兼容

分类:uni-app

以前做webapp的时候,在uc手机浏览器及个别浏览器下使用constant(safe-area-inset-top)和env(safe-area-inset-top)会有不兼容情况,甚至出现样式错误
于是在:root下去定义css变量。
但是小程序或者uniapp下是是不可以的。那么,真的要uni-app 全面屏适配(iphoneX适配)及安全区设置一样写3条css兼容吗?
其实不用,将page替换:root即可,上代码


page {  
    --safe-area-inset-top: 0px;  
    --safe-area-inset-right: 0px;  
    --safe-area-inset-bottom: 0px;  
    --safe-area-inset-left: 0px;  

}  

@supports (top: constant(safe-area-inset-top)) {  
    page {  
        --safe-area-inset-top: constant(safe-area-inset-top);  
        --safe-area-inset-right: constant(safe-area-inset-right);  
        --safe-area-inset-bottom: constant(safe-area-inset-bottom);  
        --safe-area-inset-left: constant(safe-area-inset-left);  
    }  

}  

@supports (top: env(safe-area-inset-top)) {  
    page {  
        --safe-area-inset-top: env(safe-area-inset-top);  
        --safe-area-inset-right: env(safe-area-inset-right);  
        --safe-area-inset-bottom: env(safe-area-inset-bottom);  
        --safe-area-inset-left: env(safe-area-inset-left);  
    }  
}  

```用法:  
1、margin-top: var(--status-bar-height);  
2、height: calc(100vh - 88rpx - 100rpx - var(--safe-area-inset-bottom) - var(--status-bar-height));
6 关注 分享
d***@qq.com 4***@qq.com 4***@qq.com 1***@qq.com 1***@qq.com j***@qq.com

要回复文章请先登录注册

1***@qq.com

1***@qq.com

uni-app有用吗
2021-12-18 15:28
2***@qq.com

2***@qq.com

app管用吗?
2021-11-30 18:48
5***@qq.com

5***@qq.com

记录一下 都开发了 两三个月了 才知道
2019-11-04 16:54
5***@qq.com

5***@qq.com

2019-11-04 16:54