uniapp如何使用ifdef css判断当前是ios还是安卓系统

在uniapp开发中，如何通过ifdef条件编译判断当前运行环境是iOS还是安卓系统？具体CSS代码该怎么写？我试过直接使用#ifdef APP-PLUS但无法区分平台，求详细的实现方法。

2 回复

在uni-app中，使用条件编译判断平台：

/* #ifdef APP-PLUS */
/* iOS样式 */
/* #ifdef ios */
body { background: red; }
/* #endif */

/* 安卓样式 */  
/* #ifdef android */
body { background: blue; }
/* #endif */
/* #endif */

注意：需要在APP-PLUS平台下再细分iOS和Android。


在uni-app中，可以使用条件编译语法 #ifdef 和 #endif 在 CSS 中判断当前平台。具体方法如下：

/* 仅在 iOS 平台生效的样式 */
#ifdef APP-PLUS
  /* iOS 样式 */
  .ios-style {
    padding-top: 44px; /* 适配iOS刘海屏 */
  }
#endif

/* 仅在 Android 平台生效的样式 */
#ifdef APP-PLUS
  /* Android 样式 */
  .android-style {
    padding-top: 48px; /* 适配Android状态栏 */
  }
#endif

说明：

  • APP-PLUS 表示 App 平台（包含 iOS 和 Android）
  • 如果需要更精确区分，可以在 JS 中判断：
// 在 script 中判断平台
export default {
  data() {
    return {
      isIOS: false
    }
  },
  onLoad() {
    // 方式1：使用 uni.getSystemInfo
    uni.getSystemInfo({
      success: (res) => {
        this.isIOS = res.platform === 'ios'
      }
    })
    
    // 方式2：使用条件编译
    // #ifdef APP-PLUS
    this.isIOS = plus.os.name === 'iOS'
    // #endif
  }
}

注意：

  • CSS 条件编译主要适用于平台差异较大的样式
  • 对于细微差异，建议使用 JS 动态判断并设置 class
  • 条件编译在编译时处理，不会增加运行时开销

推荐使用 JS 判断的方式，灵活性更高，可以动态响应系统变化。

回到顶部