在小程序开发中，涉及到适配iphonex的情况主要就是在页面的最下出现button的情况，对于这个的解决思路就是：
1.获取设备型号：
cont app = getApp();
wx.getSystemInfo({
success: function(res) {
//model中包含着设备信息
console.log(res.model)
var model = res.model
if (model.search('iPhone X') != -1){
app.globalData.isIpx = true;
}else{
app.globalData.isIpx = false;
}
}
})
- 根据不同的设备，设置不同的css样式，另外在html布局的时候button放进别的容器标签中例如：
xx.wxml
<view class='contentView' style='padding-bottom:{{btuBottom}}'>
<button class='but'>Button </button>
</view>
xx.wxss
.contentView{
width: 100%;
position: fixed;
bottom: 0;
left: 0;
background-color: #ffffff;
}
.btu{
width: 100%;
background-color: #3d97f2;
color: #fff;
font-size: 30rpx;
}
xx.js
data: {
btuBottom""
},
//在这里只需要判断是不是iphonex，然后设置下padding-bottom:即可
onLoad: function (options) {
let isPhone = app.globalData.isIpx;
if(isPhone){
this.setData({
btuBottom:"68rpx",
})
}
}
