1分钟解决微信小程序 iPhone 11、iPhoneX 底部安全区域（底部小黑条）适配

我就是我 2023-06-07 12:16 58阅读 0赞

【最新：目前微信官方已适配iPhone11手机型号，分别为：iPhone 11，iPhone 11 Pro Max】

**iPhone X**   对于微信小程序的**tabbar**来说，会被**底部小黑条覆盖**，需要处理，大概思路是，**得到手机型号、分别判断样式**，即可，**iPhone 11**  的手机型号目前微信官方尚未适配，可以暂用（res.model）.search('**unknown**')  进行判断区分【已适配，用这个：modelmes.search('iPhone 11')，modelmes.search('iPhone 11 Pro Max')】，如下：

安全区域指的是内容可见区域（图中蓝色部分）：

![20191015094428358.jpg][]

处理前后效果图：

![20191015094401238.png][]

步骤：

1.在app.js的onLaunch函数内**调用wx.getSystemInfo**，获得**手机型号（res.model）**，并存储为全局变量：

onLaunch: function() {
        let _self = this;
        wx.getSystemInfo({
          success: res => {
            let modelmes = res.model;
            if (modelmes.search('iPhone X') != -1) {
              _self.globalData.isIphoneX = true
            }
            wx.setStorageSync('modelmes', modelmes)
          }
        })
    }

2.在所需页面的js文件的onLoad函数内从全局变量里面拿出来第一步存储的手机型号值，这里设置为isIphoneX：

onLoad: function(options) 
        let modelmes = wx.getStorageSync('modelmes');
        let isIphoneX = app.globalData.isIphoneX;
        this.setData({
          isIphoneX: isIphoneX
        })
      }

3.在所需页面的wxml里面根据手机型号是否为iPhone X 来运用三元运算符判断底部的位置就可以啦：

已解决。

这是最简单的一种方法，有其他方法等待小伙伴们探索实践，比如可以用iOS新增的 “viewport-fit” 特性或者是 “env() 和 constant()” 特性。

可参照官方文档：[https://developer.apple.com/design/human-interface-guidelines/ios/visual-design/adaptivity-and-layout/][https_developer.apple.com_design_human-interface-guidelines_ios_visual-design_adaptivity-and-layout]

可参照iPhone各种设备尺寸及数据详细表：\[原文链接：\] [https://blog.csdn.net/Scorpio\_27/article/details/52297643][https_blog.csdn.net_Scorpio_27_article_details_52297643]

[20191015094428358.jpg]: /images/20230601/4e3aec2ab42b48329fd8a4e92274335c.png
[20191015094401238.png]: /images/20230601/974040a36ea045d684af88b538d9f93f.png
[https_developer.apple.com_design_human-interface-guidelines_ios_visual-design_adaptivity-and-layout]: https://developer.apple.com/design/human-interface-guidelines/ios/visual-design/adaptivity-and-layout/
[https_blog.csdn.net_Scorpio_27_article_details_52297643]: https://blog.csdn.net/Scorpio_27/article/details/52297643