基于uni-app前端各端适配方案

一、核心适配策略

响应式布局
Flex布局：优先使用display: flex实现弹性布局，适应不同屏幕尺寸。
媒体查询：通过CSS的@media针对不同设备设置样式（如手机、平板）。

.container {
  display: flex;
  flex-wrap: wrap;
}
@media (max-width: 768px) {
  .text { font-size: 14px; }
}

单位适配
rpx单位：uni-app核心适配单位，基于屏幕宽度等比缩放（1rpx = 屏幕宽度/750），适合跨端统一设计。
rem单位：结合lib-flexible库动态调整根字体大小，实现H5端适配。
px单位：仅用于需要固定尺寸的元素（如边框、图标）。
图片适配
多倍图：提供@2x、@3x图片，适配高分辨率屏幕。
mode属性：使用<image>组件的mode属性（如aspectFit、aspectFill）控制图片缩放。
二、平台差异处理
条件编译
通过#ifdef、#ifndef指令实现平台特定代码：

<view>
  <!-- #ifdef MP-WEIXIN -->
  <button @click="wechatLogin">微信登录</button>
  <!-- #endif -->
  <!-- #ifdef H5 -->
  <button @click="webLogin">网页登录</button>
  <!-- #endif -->
</view>

API适配
平台API封装：通过uni.getSystemInfo获取设备信息，动态调整逻辑。
统一接口：封装不同平台的底层API（如路由、网络请求、本地存储），提供统一调用方式。
样式适配
导航栏与状态栏：
使用uni.setNavigationBarTitle动态设置导航栏标题。
通过uni.getSystemInfo获取状态栏高度，调整布局。
底部安全区：针对iPhone X等机型，使用padding-bottom或safe-area-inset-bottom适配。

三、性能优化

代码优化
减少HTTP请求：合并CSS和JavaScript文件，使用图片CSS sprites。
懒加载：对图片、视频等资源使用懒加载，提升页面加载速度。
资源优化
图片压缩：使用工具压缩图片，减小文件体积。
字体图标：使用SVG或字体图标（如FontAwesome）代替图片图标，减少资源加载。
缓存策略
LocalStorage：缓存常用数据，减少网络请求。
分包加载：对H5和小程序进行分包，优化首屏加载时间。

四、动态获取设备信息并适配

<script>
export default {
  onLoad() {
    this.getDeviceInfo();
  },
  methods: {
    getDeviceInfo() {
      uni.getSystemInfo({
        success: (res) => {
          console.log('设备信息:', res);
          // 动态设置状态栏高度
          if (res.platform === 'ios') {
            this.statusBarHeight = res.statusBarHeight + 44; // iPhone导航栏高度
          } else {
            this.statusBarHeight = res.statusBarHeight + 48; // Android导航栏高度
          }
        }
      });
    }
  }
}
</script>

五、安全区适配（iPhone X等）

/* 在App.vue的全局样式中 */
page {
  /* 底部安全区适配 */
  padding-bottom: env(safe-area-inset-bottom);
}

/* 或使用CSS变量 */
.safe-bottom {
  padding-bottom: constant(safe-area-inset-bottom); /* 兼容iOS < 11.2 */
  padding-bottom: env(safe-area-inset-bottom); /* iOS 11.2+ */
}