一、小程序

1、入口处获取系统型号，缓存到全局

// app.js

App({

    globalData: { 

        isIPX: false

    },

    onLaunch() {

        wx.getSystemInfo({

            success(res) {

                this.globalData.isIPX = res.model.indexOf('iPhone X') > -1

            }

        })

    }

})

2、在需要适配的页面，获取手机型号数据

// xxx.js

const appInstance = getApp()

const isIPX = appInstance.globalData.isIPX

如果是 iphoneX，为页面添加 padding-bottom: 68rpx; 即可（即：34px）

二、移动端 h5

1、html 加两行：

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, viewport-fit=cover" />

<van-number-keyboard safe-area-inset-bottom />

2、body 添加个样式（页面整体适配）：

@supports (bottom: env(safe-area-inset-bottom)) {

  body {

    padding-bottom: env(safe-area-inset-bottom);

  }

}

3、底部按钮等元素适配：

@supports (bottom: env(safe-area-inset-bottom)) {

    div {

        // 如果原来就有padding: padding-bottom: calc(50px + env(safe-area-inset-bottom));

        padding-bottom: env(safe-area-inset-bottom); 

    }

}

4、手机扫码预览页面，完美适配~