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

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;
  },
相关推荐
HERR_QQ3 小时前
【unify】unify的微信小程序开发学习 (to be continued)
学习·微信小程序·小程序
耶啵奶膘9 小时前
uniapp+firstUI——上传视频组件fui-upload-video
前端·javascript·uni-app
racerun11 小时前
小程序导航设置更多内容的实现方法
小程序
说私域11 小时前
基于开源AI智能名片链动2+1模式S2B2C商城小程序的超级文化符号构建路径研究
人工智能·小程序·开源
mg66811 小时前
微信小程序入门实例_____快速搭建一个快递查询小程序
微信小程序·小程序
The_era_achievs_hero16 小时前
微信小程序41~50
微信小程序·小程序
耶啵奶膘1 天前
uniapp——地图路线绘制map
uni-app
shadouqi1 天前
uniapp实现图片预览,懒加载,下拉刷新等
uni-app
走,带你去玩1 天前
uniapp 微信小程序水印
微信小程序·小程序·uni-app