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;
  },
相关推荐
小白_ysf33 分钟前
uniapp开发微信小程序(新旧版本对比:授权手机号登录、授权头像和昵称)
微信小程序·小程序·uni-app
hongkid1 小时前
微信小程序私密消息
微信小程序·小程序
kilito_011 小时前
uniapp 微信小程序 列表点击分享 不同的信息
微信小程序·小程序·uni-app
二饭1 小时前
微信小程序动态切换窗口主题色
微信小程序·小程序
白日依山尽yy1 小时前
Vue、微信小程序、Uniapp 面试题整理最新整合版
vue.js·微信小程序·uni-app
2501_916013742 小时前
移动端 WebView 调试实战,多平台行为差异排查与统一调试流程
android·ios·小程序·https·uni-app·iphone·webview
资深前端之路8 小时前
小程序生命周期及页面操作执行过程详解
小程序
给力学长11 小时前
自习室预约小程序的设计与实现
java·数据库·vue.js·elementui·小程序·uni-app·node.js
從南走到北12 小时前
JAVA东郊到家按摩服务同款同城家政服务按摩私教茶艺师服务系统小程序+公众号+APP+H5
android·java·开发语言·微信小程序·小程序
前端程序猿-秦祥12 小时前
uniapp中flex布局gap属性兼容处理
uni-app