解决使用uniapp开发app端，ios部分手机底部横线适配的问题

9527566465

于 2023-04-10 14:50:42 发布

阅读量986

点赞数

文章标签： uni-app css 前端

本文链接：https://blog.youkuaiyun.com/jhfvuyhgui/article/details/130059977

版权

文章介绍了CSS中的env(safe-area-inset-bottom)函数，该函数用于获取设备底部的安全区域距离，常用于适配刘海屏等有特殊边框设计的设备。然而，这个功能仅在支持CSS3的现代浏览器中有效。示例代码展示了如何使用calc()配合env()来设置元素的底部内边距，确保内容不会被屏幕底部的系统元素遮挡。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

底部安全距离 css函数
env(safe-area-inset-bottom)
只能在支持css3的浏览器中使用

如下：

.tabbar {
	padding: 0;
	height: calc(100upx + env(safe-area-inset-bottom) / 2);
	padding-bottom: calc(env(safe-area-inset-bottom) / 2);
}