uniapp iOS安全距离高度

### 在UniApp中获取和设置iOS设备的安全距离高度 在UniApp开发中，iOS设备的安全距离高度可以通过多种方式获取和设置。以下是详细的实现方法： #### 1. 获取状态栏高度 通过 `uni.getSystemInfoSync()` 方法可以同步获取设备的系统信息，其中包括状态栏的高度。如果设备是全面屏，则状态栏高度会大于20px。 ```javascript let systemInfo = null; export const getSystemInfo = () => { if (!systemInfo) { systemInfo = uni.getSystemInfoSync(); // 补充安全区域默认值 systemInfo.safeAreaInsets = systemInfo.safeAreaInsets || { top: 0, bottom: 0, left: 0, right: 0 }; // 确保statusBarHeight存在（兼容旧版本） systemInfo.statusBarHeight = systemInfo.statusBarHeight || (systemInfo.platform === 'android' ? 25 : 20); } return systemInfo; }; // 获取状态栏高度 export const getStatusBarHeight = () => getSystemInfo().statusBarHeight; ``` 此方法适用于动态获取状态栏高度[^1]。 #### 2. 获取底部安全距离 对于iOS设备，底部安全距离可以通过 `safeAreaInsets.bottom` 属性获取。如果设备不是全面屏，则该值为0。 ```javascript // 获取iPhone底部下巴高度 export const getIphoneBottomHeight = () => { const { platform, safeAreaInsets } = getSystemInfo(); return platform === 'ios' ? safeAreaInsets.bottom : 0; }; ``` 此外，也可以通过CSS中的 `env(safe-area-inset-bottom)` 来获取底部安全距离，并将其应用到样式中[^2]。 ```css .u-fixed-b { position: fixed; bottom: 0; left: 0; right: 0; padding: 24rpx; padding-bottom: calc(24rpx + env(safe-area-inset-bottom)); z-index: 50; } ``` #### 3. 判断是否为全面屏设备 全面屏设备通常具有较大的状态栏高度或特定的型号名称。以下代码可用于判断设备是否为全面屏： ```javascript // 是否全面屏设备 export const isNotchScreen = () => { const { model, statusBarHeight } = getSystemInfo(); return statusBarHeight > 20 || /iphone x|iphone 1[1-5]/i.test(model); }; ``` 此方法结合了状态栏高度和设备型号进行判断。 #### 4. 处理元素高度不准确的问题 在某些情况下，使用 `boundingClientRect` 获取的元素高度可能与实际高度不符。为了解决这一问题，可以引入缩放比进行校正[^5]。 ```javascript const query = uni.createSelectorQuery(); query.select('#element').boundingClientRect(rect => { const systemInfo = uni.getSystemInfoSync(); const scale = systemInfo.pixelRatio; // 获取缩放比 const correctedHeight = rect.height * scale; // 校正后的高度 console.log('校正后的高度:', correctedHeight); }).exec(); ``` #### 5. 综合示例 以下是一个综合示例，展示如何在页面中应用安全距离： ```javascript import { getStatusBarHeight, getIphoneBottomHeight, isNotchScreen } from './utils'; export default { data() { return { statusBarHeight: getStatusBarHeight(), iphoneBottomHeight: getIphoneBottomHeight(), isNotch: isNotchScreen() }; }, computed: { styleObject() { return { paddingTop: `${this.statusBarHeight}px`, paddingBottom: `${this.iphoneBottomHeight}px` }; } } }; ``` ```html <view class="content" :style="styleObject"> <text>内容区域</text> </view> ``` ```css .content { position: fixed; top: 0; left: 0; right: 0; bottom: 0; padding-bottom: calc(24rpx + env(safe-area-inset-bottom)); } ``` ---