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

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

头发超多的程序媛

4653人浏览 · 2021-01-26 12:08:13

头发超多的程序媛 · 2021-01-26 12:08:13 发布

以前做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));