1. 样式兼容性
- 小程序不支持*选择器，需改用（view、text）进行全局样式设置
- H5端默认开启scoped，H5端是单页面应用，为了隔离页面间的样式默认启用了 scoped；非H5端默认并未启用 scoped，如需要隔离组件样式可以在 style 标签增加 scoped 属性；H5端默认启用了 scoped样式隔离，导致组件样式无效；可以把组件样式抽离，组件中和页面中分别引入。
- 页面视口差异（tabBar页、普通页）
小程序和APP底部的tabBar是不包含在页面高度里的，而H5端tabBar是包含的页面高度里面的。
uniapp提供了css变量，用户针对多端进行设备
| CSS 变量 | 描述 | App | 小程序 | H5 |
| --status-bar-height | 系统状态栏高度 | 系统状态栏高度、nvue 注意见下 | 25px | 0 |
| --window-top | 内容区域距离顶部的距离 | 0 | 0 | NavigationBar 的高度 |
| --window-bottom | 内容区域距离底部的距离 | 0 | 0 | TabBar 的高度 |
注意：
- var(--status-bar-height) 此变量在微信小程序环境为固定 25px，在 App 里为手机实际状态栏高度。
- 当设置 "navigationStyle":"custom" 取消原生导航栏后，由于窗体为沉浸式，占据了状态栏位置。此时可以使用一个高度为 var(--status-bar-height) 的 view 放在页面顶部，避免页面内容出现在状态栏。
- 由于在 H5 端，不存在原生导航栏和 tabbar，也是前端 div 模拟。如果设置了一个固定位置的居底 view，在小程序和 App 端是在 tabbar 上方，但在 H5 端会与 tabbar 重叠。此时可使用--window-bottom，不管在哪个端，都是固定在 tabbar 上方。
uni-app 中以下组件的高度是固定的，不可修改
| 组件 | 描述 | App | H5 |
| NavigationBar | 导航栏 | 44px | 44px |
| TabBar | 底部选项卡 | HBuilderX 2.3.4 之前为 56px，2.3.4 起和 H5 调为一致，统一为 50px。（但可以自主更改高度） | 50px |
举例
- 针对小程序中不同机型，需自定义头部状态栏
//src/page.json { "path": "pages/index/index", "style": { "navigationStyle": "custom", "navigationBarTextStyle": "white", "navigationBarTitleText": "首页" } },
在页面中
- 假设屏幕底部固定一个按钮，用于返回顶部
.toolbar { position: fixed; left: 0; right: 0; bottom: calc((var(--window-bottom)));//如果为0，将会被tabBar挡住 }
2. 骨架屏兼容性
- 页面可通过微信小程序一键生成骨架屏，但生成的主要是生成微信小程序的，需进行相应的改造变为通用的。
- 由于H5和APP端实质上是单页面应用，页面默认在style标签中加了scope属性，而微信小程序是多页面应用默认是不加scope属性的。因此针对H5和APP端的骨架屏需要再导入原页面的样式。导入方式：@important ‘文件相对路径’
3. 组件兼容性
运用条件编译，针对不同端展示不同的组件
判断平台
switch (uni.getSystemInfoSync().platform) { case 'android': console.log('运行Android上'); break; case 'ios': console.log('运行iOS上'); break; default: console.log('运行在开发者工具上'); break; }
4.JS API兼容性
- 非H5端。不支持wrindow. document等浏览器的JSAPI
- uni-app 扩展uni对象，封装大量支持跨端的JSAPI
- 使用各端专有JS API，如微信支付需添加条件编译
- 使用时对照官网的使用兼容性：en.uniapp.dcloud.io/api/
常用API举例
1.选中图片API,微信小程序使用uni,chooseMedia()适配性更好；H5和App则应使用uni,chooseImage()
2.微信支付uni.requestPayment()仅微信小程序可用
3.微信小程序可使用uni.login()一键登录，其他端则使用账号和密码登录
4.pick组件，当需要实现省市区三级联动时，微信小程序可直接使用，其他平台需要自己封装组件
5.仅微信小程序的button按钮可一键获取手机号或联系客服等
