最近在做小程序的时候，发现一个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*/  

• 一只眼睛分泌粘稠的透明液体 下眼皮长了个小白泡
• 有没有什么养生的小茶方中草药 平时喝什么养生饮品最好
• 13岁的男孩鸽子汤做法 白鸽煲什么汤最好小孩喝
• 小孩出汗多是什么原因 小孩血糖高是什么原因引起的
• 蜂蜜对女性有什么好处 吃蜂蜜对女人有什么好处
• 蜜蜂采蜜对花朵有什么影响吗 女吃花粉的好处和坏处
• 男生睡一个女生和真心处对象区别在哪 男生谈恋爱时生理反应
• 三岁小孩身上长瘊子怎么办 三岁小孩得了扁平疣怎么办
• 你还有激情吗 60岁男人会给小三多少钱
• 羊奶粉对婴幼儿的生长发育有什么好处 羊奶六大神奇功效