uniapp小程序获取手机设备安全距离

半兽先生2025-05-20 11:29

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;
  },