如果你的小程序页面按钮有用fixed定位到底部的话,那你一定会遇到兼容全面屏的坑(与底部横条重叠)。查了下文档,发现能用的就只有一个api:
wx.getSystemInfoSync()
不过蛋疼的是这个api并没有提供类似安全距离这样的数据,只提供了以下可能用得到数据:
研究了下发现只能曲线救国了:
上代码:
export function $checkFullSucreen () { Taro.getSystemInfo() .then((res) => { if (res.screenHeight - res.windowHeight - res.statusBarHeight - 46 > 70) {
// 处理相关逻辑 setGlobalData('fullScreen', true) } }) }
(上面的Taro是京东小程序的框架,这边自己封装到一个文件中导出,如果你不知道的话)
因为微信本身是对全面屏做了适配,用开发者工具可以看到小程序底部的tab高度,全面屏明显高于普通屏,这边用工具测量了iphone X的下大概是80px,又测了下iphone6及其他的,发现大概50px上下,没有超过60。
所以这边判断微信对应全面屏的适配tab底部高度应该是要起码大于60,这边考量了下取70作为判断,你也可以取75之类的。
(46则是小程序顶部title区域测出的大概高度)
根据上面的方法判断出全面屏后,可以给相应的页面增加底部padding或margin就可以了