START

最近番茄在开发小程序(字节跳动的)，遇到苹果手机底部有一个小黑条，看着很不舒服，坚决要把它优化一下。
如下图

1.png

记录一下，解决方案，以及自己研究的结果。

解决方案

百度到，有很多方案，去解决这个问题，太多，太杂了。有很多讲的是网页，而不是小程序，而我的需求是小程序，所以这里我就简单的列举一下，两种我尝试多次的方法。

方案一
- 苹果官方推荐使用env()，constant()来适配，而env()和constant()函数有个必要的使用前提，当网页设置viewport-fit=cover的时候才生效。
- ```
padding-bottom: constant(safe-area-inset-bottom); /*兼容 IOS<11.2*/
padding-bottom: env(safe-area-inset-bottom); /*兼容 IOS>11.2*/
/* 顺序不可变*/
```

方案二

简单来说，就是判断手机型号(写死的，有点蠢，但是没找到更好的方案)，如果是特定的手机型号，就给底部的元素添加一个padding即可。

具体操作如下：

app.js

App({
  globalData: {
    isFullSucreen: false,
  },
  onLaunch: function (options) {
    const self = this;
    wx.getSystemInfo({
      success: function (res) {
        let modelmes = res.model;
        let iphoneArr = ['iPhone X', 'iPhone 11', 'iPhone 11 Pro Max',]
        iphoneArr.forEach(function (item) {
          if (modelmes.search(item) != -1) {
            self.globalData.isFullSucreen = true
          }
        })    
      },
    });
  },
});

page.js

const app = getApp();

Page({
  data: {
  },
  onLoad() {
    let {isFullSucreen} = app.globalData
    if(isFullSucreen){
      this.setData({
        bottomLift:68,
      })
    }
  }
  ,
  onShow() {},
  onReady() {
  },
  onHide() {},
  onUnload() {},
});

page.wxml

<view class="bottom" style="padding-bottom: {{ bottomLift }}rpx">
</view>

解决后的效果

解决后的效果

上述解决方案实际使用情况

方案一

实践过后，微信小程序上是可以使用的，
猜测微信小程序默认就是viewport-fit=cover
可是我开发的是，字节跳动的小程序，被恶心到了o(╥﹏╥)o，尝试了很多遍，都以失败告终。这条路走不通，换条路。（看它后续什么时候修复吧，20210310）

总结

方案一，简单明了快捷，在微信小程序中推荐使用。（毕竟是苹果官方推荐的解决方案）

方案二

第二种，微信，字节都是可以使用的，没有问题，就是手机型号写死了，有点笨笨的感觉。

总结

方案二，略微复杂，但是也是有效的，扩展性不行。

题外话时间

下面说说题外话，写一写自己，在实践的过程中，遇到的情况。

苹果12怎么处理

现在都2021年了，考虑到苹果11，所以添加了如下代码

let iphoneArr = ['iPhone X', 'iPhone 11', 'iPhone 11 Pro Max',]
我身边的小伙伴都是12pm，我就在思考，这种固定手机型号的方式针对12的用户怎么做？

举一反三，如法炮制？就像这样？

let iphoneArr = ['iPhone X', 'iPhone 11', 'iPhone 11 Pro Max','iPhone 12']
结果失败了
为了方便调试原因，我在页面上打印了wx.getSystemInfo方法获取到的手机号，见下图（全部都是真机调试）。

小米8,没有底部小黑条没有问题

2.png

iPhone XR，padding出现，没有问题

3.png

iPhone 11 ，padding出现，没有问题

4.png

iPhone 12 ，没有padding，有问题，打印的居然是13,2

5.png

发现苹果12，打印出来的居然是，iPhone13,2
查阅相关博客

在这里插入图片描述

由上图得知，苹果12的设备型号为iPhone13,2

但理论上来说， wx.getSystemInfo返回的 res.model 。正确的应该是设备名称，即iPhone 12,才符合之前的规则。这有可能是一个bug，而且微信，字节(wx.getSystemInfo,tt.getSystemInfo)都是返回iPhone 13,2。
后续查阅了相关文档,如下图说明：

46c845b5da0ad21a7936b4756edf101.png

有关微信小程序和字节小程序

我在开发字节跳动的小程序，使用wx.getSystemInfo()获取手机信息的时候。由于疏忽，没有将wx替换为tt(字节跳动的简称)，程序居然正常运行，这中间原理，我是不太理解了。。。可能做了某些处理吧。
总的来说，字节跳动的小程序槽点太多了，而且还没有相关博客文档(有，那也很简陋)。
吐槽归吐槽，也希望它逐步完善吧，加油。