css：css：ios的safe-area占位符

大前端 uni-app css

发布时间 : 2026-03-01 00:00

字数:271 阅读 :

iPhone X 及以后的全面屏机型有底部 Home 指示器（黑条/白条），如上图所示。

这个时候就需要加一个占位元素，以防止加入购物车和 home指示器误触。

在 App.vue 中定义的全局样式

<style>
	/* App.vue - 全局样式 */
	.safe-area-box{
		width: 100%; /* 宽度占满父容器 */
		/* env()：CSS 环境变量函数，用于获取设备的环境变量值 */
		/* safe-area-inset-bottom：iOS 提供的环境变量，表示底部安全区域的高度（单位：px） */
		height: env(safe-area-inset-bottom); /* 高度 = 底部安全区域的高度 */
	}
</style>

要使用的时候：

<view class="safe-area-box"></view>

效果：

除了 safe-area-inset-bottom，还有：

/* 顶部安全区域（刘海区域） */
.safe-area-top {
    padding-top: env(safe-area-inset-top);
}

/* 左侧安全区域 */
.safe-area-left {
    padding-left: env(safe-area-inset-left);
}

/* 右侧安全区域 */
.safe-area-right {
    padding-right: env(safe-area-inset-right);
}

/* 同时适配多个方向 */
.safe-area-all {
    padding: env(safe-area-inset-top)    /* 上 */
             env(safe-area-inset-right)  /* 右 */
             env(safe-area-inset-bottom) /* 下 */
             env(safe-area-inset-left);  /* 左 */
}