设备信息获取（uni.getSystemInfo）

uni.getSystemInfo 的基本概念

uni.getSystemInfo 是 uni-app 提供的原生 API，用于获取当前运行环境的设备信息。这个 API 返回一个 Promise 对象，包含设备型号、操作系统版本、屏幕尺寸、窗口尺寸、像素比等详细信息。开发者可以利用这些信息进行响应式布局、设备适配或功能判断。

uni.getSystemInfo({
  success: (res) => {
    console.log(res);
  },
  fail: (err) => {
    console.error(err);
  }
});

返回参数详解

uni.getSystemInfo 返回的对象包含以下主要属性：

• brand: 设备品牌（如 Apple、Huawei）
• model: 设备型号（如 iPhone X）
• pixelRatio: 设备像素比
• screenWidth/screenHeight: 屏幕宽高（单位 px）
• windowWidth/windowHeight: 可使用窗口宽高（单位 px）
• statusBarHeight: 状态栏高度（单位 px）
• platform: 运行平台（ios/android）
• system: 操作系统版本
• language: 系统语言
• version: 基础库版本
• fontSizeSetting: 用户设置的字体大小
• SDKVersion: 小程序 SDK 版本

// 获取设备信息示例
uni.getSystemInfo({
  success: (res) => {
    this.deviceInfo = {
      model: res.model,
      system: res.system,
      screenWidth: res.screenWidth,
      screenHeight: res.screenHeight
    };
  }
});

实际应用场景

响应式布局适配

根据设备屏幕尺寸动态调整布局：

data() {
  return {
    isSmallScreen: false
  }
},
onLoad() {
  uni.getSystemInfo({
    success: (res) => {
      this.isSmallScreen = res.screenWidth < 375;
    }
  });
}

平台特定功能实现

针对不同平台实现差异化功能：

uni.getSystemInfo({
  success: (res) => {
    if (res.platform === 'ios') {
      this.setupIOSFeatures();
    } else if (res.platform === 'android') {
      this.setupAndroidFeatures();
    }
  }
});

安全区域处理

处理 iPhone X 等设备的底部安全区域：

computed: {
  safeAreaBottom() {
    const info = this.deviceInfo;
    if (info.model.includes('iPhone X')) {
      return '34px';
    }
    return '0px';
  }
}

同步获取方法

uni-app 还提供了同步获取设备信息的 API：

try {
  const res = uni.getSystemInfoSync();
  console.log(res.windowWidth);
} catch (e) {
  console.error(e);
}

性能优化建议

1. 缓存设备信息：避免重复调用
2. 按需获取：只获取必要的属性
3. 合理使用同步方法：在性能敏感场景使用同步方法

// 缓存设备信息示例
let cachedSystemInfo = null;

function getSystemInfo() {
  if (!cachedSystemInfo) {
    cachedSystemInfo = uni.getSystemInfoSync();
  }
  return cachedSystemInfo;
}

常见问题解决方案

获取不到正确的窗口高度

uni.getSystemInfo({
  success: (res) => {
    // 考虑导航栏和状态栏
    const usableHeight = res.windowHeight - res.statusBarHeight - 44;
    this.contentHeight = usableHeight + 'px';
  }
});

处理不同像素比

uni.getSystemInfo({
  success: (res) => {
    // 将设计稿尺寸转换为实际像素
    const scale = res.pixelRatio;
    this.realWidth = designWidth * scale;
  }
});

高级用法

监听设备变化

// 监听屏幕旋转
onShow() {
  this.orientationListener = () => {
    uni.getSystemInfo({
      success: (res) => {
        this.handleOrientationChange(res);
      }
    });
  };
  window.addEventListener('resize', this.orientationListener);
},
onHide() {
  window.removeEventListener('resize', this.orientationListener);
}

结合 CSS 变量使用

uni.getSystemInfo({
  success: (res) => {
    document.documentElement.style.setProperty('--status-bar-height', `${res.statusBarHeight}px`);
    document.documentElement.style.setProperty('--window-height', `${res.windowHeight}px`);
  }
});

跨平台兼容性处理

处理不同平台的差异：

function getSafeArea() {
  const info = uni.getSystemInfoSync();
  let safeArea = { top: 0, bottom: 0 };
  
  // iOS 处理
  if (info.platform === 'ios') {
    safeArea.top = info.statusBarHeight;
    if (info.model.match(/iPhone X|iPhone 11|iPhone 12/)) {
      safeArea.bottom = 34;
    }
  }
  
  // Android 处理
  if (info.platform === 'android' && info.screenHeight / info.screenWidth > 1.8) {
    safeArea.bottom = 48;
  }
  
  return safeArea;
}

实际项目中的综合应用

一个完整的设备信息处理模块示例：

// device.js
const device = {
  info: null,
  
  init() {
    if (!this.info) {
      this.info = uni.getSystemInfoSync();
    }
    return this.info;
  },
  
  isIOS() {
    return this.init().platform === 'ios';
  },
  
  isAndroid() {
    return this.init().platform === 'android';
  },
  
  isSmallScreen() {
    return this.init().screenWidth < 375;
  },
  
  isLargeScreen() {
    return this.init().screenWidth >= 414;
  },
  
  getSafeArea() {
    const info = this.init();
    // ...安全区域计算逻辑
  }
};

export default device;

调试技巧

在开发过程中调试设备信息：

// 在页面中显示设备信息
<template>
  <view>
    <text v-for="(value, key) in deviceInfo" :key="key">
      {{key}}: {{value}}
    </text>
  </view>
</template>

<script>
export default {
  data() {
    return {
      deviceInfo: {}
    }
  },
  onLoad() {
    uni.getSystemInfo({
      success: (res) => {
        this.deviceInfo = res;
      }
    });
  }
}
</script>