移动端开发,手机安全区域的问题

获得手机的屏慕的属性值

//uni-app中
const sysinfo = uni.getSystemInfoSync();
console.log(sysinfo);

//taro中
const sysinfo = Taro.getSystemInfoSync();
console.log(sysinfo);

//微信小程序中
const sysinfo = wx.getSystemInfoSync();
console.log(sysinfo);

//解构出关键信息
const {safeArea:{bottom},screenHeight,statusBarHeight,navigationBarHeight} = sysinfo;

打印出来的属性很多.我们需要重点关注的是:

statusBarHeight:状态条高度(顶部刘海不同,状态条高度会不同)

navigationBarHeight:导航条高度

screenHeight:屏幕区域高度

safeArea.bottom:安全的下边距高度(如果下方有刘海,会排除掉刘海部分的距离)

几个重要的场景与公式

注:在使用以下公式时,笔者是禁用掉了默认导航条的,如果要使用默认导航条,则H5,APP与微信小程序的表现形式并不完全一样,需要单独+-默认导航条的高度.

几个常用的距离:

1.顶部有刘海,顶部状态栏占位盒子的高度:statusBarHeight+'px';

2.顶部自定义导航条的高度:写死44px或88rpx.

3.底部有刘海,需要占位空白盒子高度:screenHeight - safeArea.bottom + 'px'

4.底部tabbar的高度:1.写死44px或88rpx;2.写死44px + (第3项)底部刘海占位空白盒子的高度

5.中部内容滚动区的高度:safeArea.bottom - statusBarHeight - navigationBarHeight + 'px'

IPhone6效果展示: 底部无安全留白

IPhoneX效果展示: 底部安全留白34px