说一个微信小程序的iPhoneX适配吧, 因为iPhoneX底部没有虚拟按键,底部的横线会出现遮挡这时候就要处理下:
大概思路就是获取到客户端设备,然后判断是iPhoneX就换样式。
在app.js中添加一个检测当前设备是否是iPhoneX的变量:
globaldata: { userInfo: null, isIphoneX: false//判断是否是iPhoneX }, onShow: function() { var that = this; wx.getSystemInfo({ success: function(res) { // console.log('手机信息res'+res.model) let modelmes = res.model; if (modelmes.search('iPhone X') != -1) { that.globalData.isIphoneX = true } }, }) }在需要做兼容的xxx.js中引入:
var app= getApp();Page({data: { isIphoneX: false},onLoad: function(){ // 判断是否为iPhoneX var isIphoneX = app.globalData.isIphoneX; console.log(isIphoneX ? '是iPhoneX' : '不是iPhoneX') this.setData({ isIphoneX: isIphoneX }) }})然后在xx.wxml中对需要做兼容的元素做判断 :
<view ></view>
然后在对应的wxss里设置好对应的类名就ok 了,比较简单方便。



