微信小程序中适配iphoneX或适配 iPhone 11/Pro及以上的机型的兼容性

本文链接：https://blog.csdn.net/weixin_42220039/article/details/110880593

本文介绍了如何解决微信小程序在iPhone X系列及11.12以上设备底部横线遮挡问题。通过调用wx.getSystemInfo接口获取设备信息，设置全局变量判断机型，并在页面JS中根据全局变量调整样式，以实现兼容性适配。同时展示了具体的代码实现和效果展示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

今天做一个功能，需要兼容iphoneX系列以及11.12以上的设备的兼容性，由于微信小程序在适配iphone x 的时候 底部的横线会出现遮挡如图：

在这里插入图片描述

于是乎就翻了翻小程序的API文档，果不其然在小程序基础接口里面有提供接口
wx.getSystemInfo(Object object)

那么接下来我们讲解下在小程序的开发中我们怎么使用？

1、在全局的app.js文件中globalData我们创建全局变量，然后获取设备型号

 globalData: {
        isIphoneX: false,//判断机型 
    }

onShow(e){
        var that = this
        // 获取设备机型
        wx.getSystemInfo({
            success:  res=>{
              console.log('手机信息res'+res.model)
              let model = res.model;
                if (/iphone\sx/i.test(model) || (/iphone/i.test(model) && /unknown/.test(model))|| /iphone\s11/i.test(model)){
                    that.globalData.isIphoneX = true;
                }else{
                    that.globalData.isIphoneX = false;
                }
            }
        })
       
    },

运行代码拿到如下图所示结果
在这里插入图片描述
2、在需要引用的页面js文件中onload方法里获取全局变量
js

onLoad(){
  //获取当前设备机型
        let isIphoneX = app.globalData.isIphoneX;
        this.setData({
            isIphoneX: isIphoneX
        })
        wx.getSystemInfo({
            success (ress) {
                query.select('.pt_footer').boundingClientRect(function (res){
                    _this.setData({
                        windowHeight: ress.windowHeight - res.height - 4
                    });
                }).exec();
              }
        });
    }

3 在 wxml文件中进行css的逻辑判断
wxml

<view class="pt_footer {{isIphoneX?'isIPX':''}}"></view>

wxss

.isIPX{
  height: 128rpx !important;
}

最终修改之后的样式如下
在这里插入图片描述