小程序对 iPhoneX 以上型号判断样式

最近在做小程序的时候，发现一个css适配的问题，因 iphoneX 以上的手机型号底部有滑动条显示，会挡住 footer 的底部内容，所以需要到判断 iPhoneX 设备来显示不同样式。

文章插图
微信使用 wx.getSystemInfo
百度使用swan.getSystemInfo
在 app.js 中添加设备判断globalData:{
userInfo:null,
isIphoneX:false
//判断是否是iPhoneX
},
onShow:function(){
varthat=this;
swan.getSystemInfo({//微信修改为：wx.getSystemInfo
success:function(res){
//console.log(\'手机信息res\'+res.model)
letmodelmes=res.model;
if(modelmes.search(\'iPhoneX\')!=-1){
that.globalData.isIphoneX=true
}
},
})
}在需要判断的 index.js 内添加varapp=getApp();
Page({
data:{
isIphoneX:false
},
onLoad:function(){
//判断是否为iPhoneX
varisIphoneX=app.globalData.isIphoneX;
console.log(isIphoneX?\'是iPhoneX\':\'不是iPhoneX\')
this.setData({
isIphoneX:isIphoneX
})
}
})在需要的 wxml/swan 页面添加判断
该方法只适合需要适配的页面，百度小程序提供的动态库或者组件目前是不能使用的。
使用苹果官方推出适配方案css函数env()、constant()来适配若全局需要适配的话，可以直接在app.wxss或app.css里给相应的部分添加以下代码：
【小程序对 iPhoneX 以上型号判断样式】padding-bottom:constant(safe-area-inset-bottom);
/*兼容IOS11.2*/