一、解决H5和小程序的页面兼容问题
1.问题简述
在设计页面的时候,H5页面通常不考虑手机最上方的状态栏(包含信号类型、信号强弱、时间、电量等),只需要专注页面内容的实现,但是在微信小程序的页面,需要考虑最上方这个信息显示区的高度及胶囊的位置,因为这两个区域都是系统自带的,且不同机型的用户两个区域的位置不同,这就需要一个方法,来让页面适配所有机型的设备,不然原本想要展示的内容就有可能被状态栏和胶囊遮挡
![](https://img2020.cnblogs.com/blog/1525872/202101/1525872-20210120230312683-428949437.png)
2.解决思路
获取用户机型的数据,根据状态栏所占用区域的高度,以及胶囊的相对位置,提前预留出空白区域,避免页面内容被占用
3.代码实现
需要用到一个uni-app的自带函数:uni.getSystemInfoSync(),作用是获取用户当前设备和小程序挂钩的数据,以下是该函数的打印信息
关键字解释:
- language:语言
- model:型号
- pixelRatio:像素密度(像素密度越高,显示效果越清晰,像素密度影响我们发送给设备的图片分辨率,例如普通设备像素密度低,需要的图片分辨率也小;高清设备像素密度高,需要的图片分辨率也高)
- platform:平台
- safeArea:距离屏幕四个边的间距(貌似只有ios系统的有)
- safeAreaInsets:控件可见区域距离屏幕四个边的距离(可以参考大佬的这篇博客:iOS safeAreaInsets安全区域相关知识)
- screenHeight:设备屏幕高度
- screenWidth:设备屏幕宽度
- statusBarHeight:状态栏高度
- system:系统版本号
- windowButtom/Height/Top/Width:用于区分底部的navbar
相关代码:
<template>
<view :style="{height: statusBarHeight + 'px;'}"></view>
</template>
<script>
export default {
data() {
return {
statusBarHeight: 20
};
},
created(){
// 获取手机系统信息
const info = uni.getSystemInfoSync()
// 设置状态栏高度
this.statusBarHeight = info.statusBarHeight
}
}
</script>