uniapp safearea
时间: 2025-04-29 11:28:23 浏览: 31
### UniApp 安全区域 (SafeArea) 布局使用方法
在开发移动应用时,考虑到不同设备屏幕顶部和底部的安全区域非常重要。对于 iPhone X 及更新型号以及带有刘海屏或其他特殊形状的安卓手机来说尤为如此。
#### 使用 `safe-area-inset` CSS 属性处理安全区
为了确保页面内容不会被遮挡,在 UniApp 中可以利用内置的支持来适配这些情况:
- **顶部状态栏留白**:通过设置 `padding-top: constant(safe-area-inset-top); /*兼容 iOS 11 */ padding-top: env(safe-area-inset-top); /* 新标准 */` 来给定距离顶部的安全边距[^3]。
- **底部导航栏/虚拟按键预留空间**:同样地,可以通过设定 `padding-bottom: constant(safe-area-inset-bottom); /* 兼容 iOS 11 */ padding-bottom: env(safe-area-inset-bottom); /* 新标准 */` 实现底部的安全间距[^3]。
下面是一个简单的例子展示如何运用上述属性创建适应各种机型的设计方案:
```html
<template>
<view class="container">
<!-- 页面主体 -->
<scroll-view scroll-y :style="{ height: 'calc(100vh - var(--status-bar-height))' }">
<text>滚动的内容...</text>
</scroll-view>
<!-- 底部固定按钮 -->
<button type="primary">点击这里</button>
</view>
</template>
<style scoped lang="scss">
.container {
display: flex;
flex-direction: column;
min-height: 100vh;
button {
margin-top: auto; // 让按钮始终位于可视区域内最下方
width: 100%;
@supports(padding: max(constant(safe-area-inset-bottom),env(safe-area-inset-bottom))) {
padding-bottom: max(constant(safe-area-inset-bottom), env(safe-area-inset-bottom));
}
}
.content {
padding-top: constant(safe-area-inset-top);
padding-top: env(safe-area-inset-top);
&__inner {
padding-left: 20rpx;
padding-right: 20rpx;
}
}
}
</style>
```
此代码片段展示了如何构建一个能够自动调整以避开iPhoneX及以上版本圆角、传感器区域的应用界面,并保持良好的用户体验[^3]。
阅读全文
相关推荐


















