目錄

一、什么是安全區域？

二、獲取安全區域距離的核心方法

三、JavaScript動態獲取安全區域距離

1. 核心API

2. 完整代碼示例

3. 關鍵點說明

四、CSS環境變量適配安全區域

1. 使用?env()?和?constant()

3. 注意事項

五、不同平臺的適配策略

1. H5 端

2. 小程序端

3. App端

六、總結

---

一、什么是安全區域？

安全區域是指屏幕邊緣預留的非內容顯示區域，用于避免UI元素被系統組件（如狀態欄、底部導航欄）遮擋。在全面屏設備中，安全區域的頂部和底部距離尤為重要。例如：

• 頂部安全距離：狀態欄高度（如iPhone的劉海區域）。
• 底部安全距離：設備底部的傳感器區域或虛擬按鍵區域。

二、獲取安全區域距離的核心方法

在uni-app中，可以通過以下兩種方式動態獲取安全區域距離：

1. JavaScript API：使用?uni.getSystemInfoSync()?獲取系統信息。
2. CSS環境變量：通過?env(safe-area-inset-xxx)?和?constant(safe-area-inset-xxx)?實現樣式適配。

?

三、JavaScript動態獲取安全區域距離

1. 核心API

const systemInfo = uni.getSystemInfoSync();
const { safeAreaInsets } = systemInfo;
console.log("頂部安全距離:", safeAreaInsets.top);
console.log("底部安全距離:", safeAreaInsets.bottom);

2. 完整代碼示例

<template><view class="container" :style="{ paddingBottom: bottomPadding + 'px' }"><!-- 頁面內容 --><view class="content">動態適配安全區域</view></view>
</template><script>
export default {data() {return {bottomPadding: 0, // 底部安全距離};},onReady() {this.getSafeAreaInsets();},methods: {getSafeAreaInsets() {try {const systemInfo = uni.getSystemInfoSync();const { safeAreaInsets } = systemInfo;// 設置底部安全距離this.bottomPadding = safeAreaInsets.bottom;// 可選：設置頂部安全距離const topPadding = safeAreaInsets.top;console.log("頂部安全距離:", topPadding);} catch (err) {console.error("獲取安全區域失敗:", err);}},},
};
</script><style>
.container {background-color: #f0f0f0;position: relative;
}.content {padding: 20px;
}
</style>

3. 關鍵點說明

• uni.getSystemInfoSync()：同步獲取系統信息，包含?safeAreaInsets（安全區域距離）。
• safeAreaInsets：對象包含?top、left、right、bottom?四個屬性，分別表示安全區域到屏幕邊緣的距離。
• 兼容性：此方法適用于所有平臺（H5、小程序、App），但部分安卓設備可能需要額外測試。

?

四、CSS環境變量適配安全區域

1. 使用?env()?和?constant()

在CSS中，可以通過環境變量直接設置安全區域的內邊距或外邊距：

/* 底部安全區域適配 */
.container {padding-bottom: constant(safe-area-inset-bottom); /* 兼容 iOS < 11.2 */padding-bottom: env(safe-area-inset-bottom);      /* 兼容 iOS >= 11.2 */
}/* 頂部安全區域適配 */
.header {padding-top: env(safe-area-inset-top);
}

?2. 完整代碼示例

<template><view class="container"><view class="header">頂部導航欄</view><view class="content">頁面內容</view><view class="footer">底部導航欄</view></view>
</template><style>
.container {background-color: #ffffff;height: 100vh;display: flex;flex-direction: column;
}.header {padding-top: env(safe-area-inset-top); /* 適配頂部安全區域 */background-color: #f8f8f8;height: 60px;text-align: center;line-height: 60px;
}.content {flex: 1;background-color: #e0e0e0;
}.footer {padding-bottom: env(safe-area-inset-bottom); /* 適配底部安全區域 */height: 60px;background-color: #f0f0f0;text-align: center;line-height: 60px;
}
</style>

3. 注意事項

• 順序要求：constant()?和?env()?必須同時存在，且?constant()?在前。
• 兼容性：env()?僅支持 iOS 11.2+ 和部分安卓機型，需結合JavaScript動態適配。

?

五、不同平臺的適配策略

1. H5 端

• 推薦方法：優先使用?uni.getSystemInfoSync()?動態計算安全區域距離。
• CSS限制：部分瀏覽器不支持?env()，需通過JavaScript動態設置樣式。

2. 小程序端

• 安全區域API：uni.getSystemInfoSync()?支持所有平臺。
• CSS適配：env()?在微信小程序中可能不可用，建議通過JavaScript動態設置。

3. App端

• 原生配置：在?manifest.json?中配置安全區域（僅限App端）：

{"plus": {"distribute": {"android": {"webview": {"overflow": "hidden"}}}}
}

?

六、總結

通過結合JavaScript動態獲取安全區域距離和CSS環境變量，可以高效適配全面屏設備。以下是關鍵步驟總結：

1. JavaScript動態適配：使用?uni.getSystemInfoSync()?獲取?safeAreaInsets。
2. CSS環境變量：通過?env(safe-area-inset-xxx)?設置內邊距或外邊距。
3. 兼容性處理：針對不同平臺（H5、小程序、App）選擇合適的適配策略。

?