底部安全距离以及胶囊位置_手机浏览器底部高度怎么计算

1.底部安全距离

全面屏手机与非全面屏手机的不兼容性主要就是由于底部按钮和选项卡与底部黑线重叠，而安全区域就是指的不受圆角、齐刘海以及小黑条影响的部分。

底部安全距离可以使用使用微信官方API：getSystemInfo()中的safeArea对象进行适配。该API的具体使用详情链接：[getSystemInfoSync]

在app.js中可以通过计算得到底部安全距离的高度：

// app.js
App({
  onLaunch() {
    const {safeArea:{top,height},screenHeight}=wx.getSystemInfoSync();
    this.globalData.safeAreaHeight=screenHeight-top-height;//底部安全区域高度
  },
  globalData: {
    
  }
})

1
2
3
4
5
6
7
8
9
10
11

在后续设置tabBar或者其他样式的时候可以使用计算得到的底部安全高度。

2.胶囊位置

不同手机胶囊高度，状态栏高度会有区别，为了完成顶部导航栏的适配，需要计算胶囊位置。

状态栏高度可以通过getSystemInfo获取

而胶囊的高度可以通过wx.getMenuButtonBoundingClientRect()获取，该api的内容如下：getMenuButtonBoundingClientRect()
通过该api可以获取胶囊的布局位置，坐标信息以屏幕左上角为起点。从上图可以看出在导航栏中胶囊上下的高度差是一致的，所以可以通过胶囊距离顶部的距离-状态栏高度计算得到高度差。

// app.js
App({
  onLaunch() {
   
    const menuButtom=wx.getMenuButtonBoundingClientRect();
    const statusBarHeight=wx.getSystemInfoSync().statusBarHeight;
    const menuHeight=menuButtom.height;
    const menuTop=menuButtom.top;
    let heightGap=menuTop-statusBarHeight;
    let sumHeight=statusBarHeight+menuHeight+2*heightGap
    this.globalData.sumTopHeight=sumHeight
 
  },
  globalData: {
  }
})

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17