utils.js
?
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;
};// 獲取狀態欄高度(px)
export const getStatusBarHeight = () => getSystemInfo().statusBarHeight;// 獲取iPhone底部下巴高度(px)
export const getIphoneBottomHeight = () => {const { platform, safeAreaInsets } = getSystemInfo();return platform === 'ios' ? safeAreaInsets.bottom : 0;
};// 是否全面屏設備
export const isNotchScreen = () => {const { model, statusBarHeight } = getSystemInfo();return statusBarHeight > 20 || /iphone x|iphone 1[1-5]/i.test(model);
};
import { getSystemInfo, getStatusBarHeight, getIphoneBottomHeight } from '@/utils/device';
computed: {// 底部安全區域高度(單位:px)bottomSafeArea() {return getIphoneBottomHeight();},// 轉換為rpx單位bottomSafeAreaRpx() {return this.bottomSafeArea * (750 / this.deviceInfo.windowWidth);}},created() {// 獲取設備狀態欄高度const { statusBarHeight } = uni.getSystemInfoSync();this.navBarHeight = statusBarHeight;},