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

最新推荐文章于 2025-05-15 10:03:27 发布

头发超多的程序媛

最新推荐文章于 2025-05-15 10:03:27 发布

阅读量4.9k

点赞数

分类专栏： css 文章标签： css

本文链接：https://blog.youkuaiyun.com/weixin_44714325/article/details/113110076

版权

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