uniapp跨端适配方案

uniapp通过条件编译和响应式布局实现跨端适配，支持iOS、Android、H5及小程序等多端应用。以下是核心实现方法：

---

1.条件编译处理平台差异

通过process.env.UNI_PLATFORM判断当前运行平台，针对不同平台编写差异化代码：

// #ifdef H5
console.log('仅在H5平台执行');
// #endif// #ifdef MP-WEIXIN
console.log('仅在微信小程序执行');
// #endif

---

2.响应式单位rpx与upx

使用rpx（推荐）或upx作为样式单位，uniapp会自动转换为各端适配的像素值：

.container {width: 750rpx; /* 满屏宽度 */padding: 20rpx;font-size: 28rpx;
}

---

3.动态样式处理

通过JS计算动态尺寸，结合uni.getSystemInfoSync()获取设备信息：

const systemInfo = uni.getSystemInfoSync();
const windowWidth = systemInfo.windowWidth;// 计算元素宽度（示例：屏幕宽度的一半）
const elementWidth = windowWidth / 2 + 'px';

---

4.组件适配方案

使用match-media组件实现媒体查询：

<match-media :min-width="375"><view>仅当屏幕宽度≥375px时显示</view>
</match-media>

---

4.图片多倍图适配

通过@2x、@3x后缀自动匹配高分辨率设备：

assets/├── logo.png├── [e-mail]├── [e-mail]

5.代码中引用基础图即可：

<image src="/static/logo.png"></image>

---

6.安全区域适配（iOS）

使用safe-area-inset-*CSS变量处理iPhone刘海屏：

.page {padding-bottom: constant(safe-area-inset-bottom);padding-bottom: env(safe-area-inset-bottom);
}

---

7.完整示例代码

// 页面逻辑
export default {data() {return {statusBarHeight: 0}},onLoad() {const { statusBarHeight } = uni.getSystemInfoSync();this.statusBarHeight = statusBarHeight;}
}

<!-- 视图模板 -->
<template><view class="container"><!-- 状态栏占位 --><view :style="{ height: statusBarHeight + 'px' }"></view><!-- 条件编译内容 --><!-- #ifdef MP-WEIXIN --><button open-type="share">微信分享</button><!-- #endif --><!-- 响应式布局 --><view class="box"></view></view>
</template><style>
.container {padding: 20rpx;
}
.box {width: 80%;height: 200rpx;margin: 0 auto;background-color: #f0f0f0;
}
</style>

通过以上方法组合使用，可有效解决90%以上的跨端适配问题。实际开发中建议结合uni-ui组件库，其内置多端适配逻辑可进一步降低开发成本。