# 安全区 SafeArea

- 页面: https://jiguang132.com/zh/resources/ant-design-mobile/docs/safe-area
- 资源: Ant Design Mobile (https://jiguang132.com/zh/resources/ant-design-mobile.md)
- 全部指南: https://jiguang132.com/zh/resources/ant-design-mobile/docs.md

在全面屏下提供自适应的边距调整。

## 安装

```bash
npm install antd-mobile@5.43.0
```

antd-mobile 是移动网页组件库，不是 React Native 或小程序组件。React 19 项目需在入口用 `unstableSetRender` 注册 `createRoot`，否则 Toast、Dialog 等命令式 API 无法渲染；深色模式通过 `<html data-prefers-color-scheme="dark">` 切换。

示例来自 Ant Design Mobile 官方仓库（MIT），固定在 npm 5.43.0 对应的提交；示例中的 `DemoBlock` 等展示辅助组件由 JGuang 重写，不属于 antd-mobile 的 API。

在全面屏下提供自适应的边距调整。

## 何时使用

当网页被全屏展示时，可借助安全区实现自动适配。

## 说明

SafeArea 组件是用来在全面屏下提供自适应的边距调整，它的底层实现其实是 `env(safe-area-inset-xxx)`。

当你的网页是被全屏展示时，可以借助它来实现自动的适配，下图中蓝色的部分是顶部 SafeArea 所占据的区域，而橙色的部分是底部 SafeArea 所占据的区域。

<img alt="safe-area-top" src="https://gw.alipayobjects.com/mdn/rms_25513e/afts/img/A*ATR3R5FOt9gAAAAAAAAAAAAAARQnAQ" width="500px" />

<img alt="safe-area-bottom" src="https://gw.alipayobjects.com/mdn/rms_25513e/afts/img/A*M9vOS5mUT_AAAAAAAAAAAAAAARQnAQ" width="500px" />

需要注意的是，下方的 demo 在桌面端浏览器下是看不到效果的：

## 示例

## SafeArea

### 属性

| 属性     | 说明         | 类型                | 默认值 |
| -------- | ------------ | ------------------- | ------ |
| position | 安全区的位置 | `'top' \| 'bottom'` | -      |

### CSS 变量

| 属性       | 说明       | 默认值 | 全局变量                   |
| ---------- | ---------- | ------ | -------------------------- |
| --multiple | 显示的倍数 | `1`    | `--adm-safe-area-multiple` |

## FAQ

### 在 rem 布局下，SafeArea 高度很小怎么办？

一些 rem 方案会通过 viewport meta 设置网页的整体缩放，这种情况下，SafeArea 也会被对应的缩放，从而很可能高度异常。这时你可以通过全局的 `--adm-safe-area-multiple` CSS 变量来调整 SafeArea 的显示倍数，例如，如果你的项目框架将页面整体缩放为了 0.5 倍，那么你可以设置 `--adm-safe-area-multiple: 2` 来做对应的补偿调整。

---

JGuang 全部资源索引: https://jiguang132.com/llms.txt