在app.js 的 onLaunch 函数内调用 wx.getSystemInfo, 获得手机型号 res.model,然后通过一下代码判断:
wx.getSystemInfo({
success: res => {
if (res.model.indexOf('iPhone X') > -1) { //iphonex,xr,xs
}
},
fail(err) {
console.error(err);
}
})
这么写以后再增加机型还要维护
现在小程序getSystemInfo方法会返回safeArea对象,其中top字段可以作为我们判断的依据。x及以上机型的异形屏top为44,非异形屏为20。
所以可以使用这样来判断就不需要再维护了。
wx.getSystemInfo({
success: res => {
if (res.safeArea.top > 20) { //x及以上的异形屏top为44,非异形屏为20
// 可以将结果存到globalData:
}
},
fail(err) {
console.error(err);
}
})
很多人会问这有什么用处呢,最常用的一个就是自定义tabBar的时候,x及以上机型都会在底部出现横线,这样会遮挡tabBar,所以可以通过判断来给tabBar增加距离底部高度。
安卓机呢
非刘海系列,屏幕高度小于 812
只是开发工具判断不对(platform不是iOS),真机正常。
platform.toUpperCase() === 'IOS' && screenHeight >= 812
官方有专门的样式写这个==>padding-bottom: env(safe-area-inset-bottom)