1. 首頁 > 生活百科 > >

小程序對 iPhoneX 以上型號判斷樣式

生活百科

最近在做小程序的時候，發現一個css適配的問題，因 iphoneX 以上的手機型號底部有滑動條顯示，會擋住 footer 的底部內容，所以需要到判斷 iPhoneX 設備來顯示不同樣式 。

小程序對 iPhoneX 以上型號判斷樣式

文章插圖
【小程序對 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里給相應的部分添加以下代碼：
padding-bottom:constant(safe-area-inset-bottom);
/*兼容IOS11.2*/

    推薦閱讀