H5开发
第一步：
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0,viewport-fit=cover" name="viewport" />
第二步：
{
padding-bottom: env(safe-area-inset-bottom);
}
或者
{
height: calc(60px(假设值) + env(safe-area-inset-bottom));
margin-bottom: env(safe-area-inset-bottom);
}
小程序开发
const _this = this;
wx.getSystemInfo({
success: function(res) {
//查询是否是iponex
const model = res.model
if (model.search('iPhone X') != -1) {
_this.globalData.isIpx = true;
} else {
_this.globalData.isIpx = false;
}
if (res.brand.search('HONOR')!=-1) {
console.log('HUAWEI')
_this.globalData.isHuaWei = true;
}
//导航高度
let totalTopHeight = 68 //默认安卓
let isAndro = true //默认安卓
if (res.model.indexOf('iPhone X') !== -1) {
totalTopHeight = 88
isAndro = false
} else if (res.model.indexOf('iPhone') !== -1) {
totalTopHeight = 64
isAndro = false
}
_this.globalData.navHeight = totalTopHeight
_this.globalData.isAndro = isAndro
_this.globalData.windowHeight = res.windowHeight
},
fail(err) {
console.log(err)
}
});
步骤二： 在需要引用的页面js文件中onload方法里获取全局变量
let isIphoneX = app.globalData.isIphoneX;
this.setData({
isIphoneX: isIphoneX
})
步骤三：在 wxml文件中 进行css的逻辑判断
<view class="{{isIphoneX?'isIPX':''}}"> </wiew>
步骤四：在 wxss文件中 进行css，修改自己需要的css样式即可
.isIPX {
padding-bottom: 30rpx !important;
}
