百度\微信小程序对 iPhoneX 以上型号判断样式

最近在做小程序的时候，发现一个css适配的问题，因 iphoneX 以上的手机型号底部有滑动条显示，会挡住 footer 的底部内容，所以需要到判断 iPhoneX 设备来显示不同样式。

微信使用 wx.getSystemInfo

百度使用 swan.getSystemInfo

在 app.js 中添加设备判断

globalData: {
    userInfo: null,
    isIphoneX: false
    //判断是否是iPhoneX
},
onShow: function() {
    var that = this;
    swan.getSystemInfo({ //微信修改为：wx.getSystemInfo
      success: function(res) {
        // console.log('手机信息res'+res.model)  
        let modelmes = res.model;
        if (modelmes.search('iPhone X') != -1) {
          that.globalData.isIphoneX = true
        }
      },
    })
}

在需要判断的 index.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
    })
  }
})

在需要的 wxml/swan 页面添加判断

<view class="{{isIphoneX ? ' 我是X ' : ' 我不是X '}}"></view>

该方法只适合需要适配的页面，百度小程序提供的动态库或者组件目前是不能使用的。

使用苹果官方推出适配方案css函数env()、constant()来适配

若全局需要适配的话，可以直接在app.wxss或app.css里给相应的部分添加以下代码：

padding-bottom: constant(safe-area-inset-bottom); 
/*兼容 IOS<11.2*/
padding-bottom: env(safe-area-inset-bottom); 
/*兼容 IOS>11.2*/

文档下载：百度\微信小程序对 iPhoneX 以上型号判断样式.doc文档