UniApp 是一个跨平台开发框架，支持多端应用（如 H5、小程序、iOS、Android 等）。由于不同设备的屏幕尺寸、分辨率、操作系统等存在差异，设备适配是开发过程中需要重点关注的问题。以下是 UniApp 设备适配的详细策略和技巧。

1.屏幕适配

1.1 使用 rpx 单位

• rpx 介绍：rpx 是 UniApp 提供的自适应单位，1rpx 等于屏幕宽度的 1/750。在不同设备上，rpx 会自动转换为对应的像素值。

• 使用方法：在样式文件中使用 rpx 单位，如 width: 750rpx;。对于需要固定尺寸的元素，可以使用 px 单位。

1.2 响应式布局

• Flex 布局：使用 Flex 布局实现弹性盒子模型，适应不同屏幕尺寸。

• 媒体查询：在 CSS 中使用 @media 查询，针对不同屏幕尺寸设置样式。

1.3 图片适配

• 多倍图：提供 2x、3x 等多倍图，适应高分辨率屏幕。

• 图片缩放：使用 mode 属性控制图片缩放模式，如 aspectFit、aspectFill。

2.平台适配

2.1 条件编译

• 平台判断：使用 #ifdef 和 #ifndef 判断当前平台，编写平台特定代码。

• 平台特定样式：在样式文件中使用条件编译，设置平台特定样式。

2.2API 适配

• 平台特定 API：使用 uni.getSystemInfo 获取设备信息，动态调整逻辑。

3.字体与图标适配

3.1 字体适配

• 使用系统字体：优先使用系统默认字体，确保在不同设备上显示一致。

• 自定义字体：使用 @font-face 引入自定义字体，注意字体文件大小。

3.2 图标适配

• 字体图标：使用字体图标（如 FontAwesome）代替图片图标，减少资源加载。

• SVG 图标：使用 SVG 图标，确保在高分辨率屏幕上清晰显示。

4.导航栏与状态栏适配

4.1 导航栏适配

• 自定义导航栏：使用 uni.setNavigationBarTitle 动态设置导航栏标题。使用 uni.setNavigationBarColor 设置导航栏颜色。

• 适配不同平台：在 pages.json 中配置导航栏样式，适应不同平台。

4.2 状态栏适配

• 获取状态栏高度：使用 uni.getSystemInfo 获取状态栏高度，动态调整布局。

5.横竖屏适配

5.1 锁定屏幕方向

• 在 pages.json 中配置 pageOrientation，锁定屏幕方向。

5.2 横竖屏切换监听

• 使用 uni.onWindowResize 监听屏幕方向变化，动态调整布局。

6.测试与调试

6.1 多设备测试

• 使用真机测试，确保在不同设备上显示一致。

• 使用模拟器测试不同分辨率和屏幕尺寸。

6.2 调试工具

• 使用 Chrome DevTools 调试 H5 页面。

• 使用微信开发者工具调试小程序。

• 使用 HBuilderX 的真机调试功能调试移动端应用。

7.总结

UniApp 的设备适配需要从屏幕、平台、字体、导航栏、横竖屏等多个方面入手。通过合理的适配策略和工具支持，可以确保应用在不同设备上提供一致的用户体验。在实际开发中，建议结合具体场景，持续测试和优化适配效果。