小程序fixed底部按钮的兼容问题

fixed固定在底部的按钮，iPhone10以上机型，会掉下去，然后就点不到它了

场景：我们公司有一个编辑器的需求，可以点击按钮添加多个文本域，两三个是没问题的，当超过可是区域后，再点击输入文字时，按钮就会突然掉下去，怎么也点不到，只出现在iPhone10以上机型，安卓的没有问题。
***解决办法***查了很多文档，都说微信没有兼容iPhone10以上机型，要单独处理一下样式，于是我在生命周期onLaunch里面获取了机型，存在了本地，在用到的页面取出来单独控制按钮的样式，就是把按钮抬高。
1.生命周期onLaunch里面获取机型

// 获取屏幕大小
    var _that = this;
    wx: wx.getSystemInfo({
      success: function (res) {
        _that.systemInfo = res;
        let modelmes = res.model;
        if (modelmes.search('iPhone X') != -1) {
          _that.globalData.isIphoneX = true
        }
        wx.setStorageSync('modelmes', modelmes)
      }
    });

2.在当前页面的onload里面取出来，设置一个变量用来控制样式（不知道机型具体名称，可以使用真机测试获取机型型号，在控制到就能看到，因为我们把它存在本地啦）

let modelmes = wx.getStorageSync('modelmes');

    if (modelmes == 'iPhone XS Max' || modelmes == 'iPhone X' || modelmes == 'iPhone 11'|| modelmes =='iPhone 11 Pro Max<iPhone12,5>') {
      this.setData({
        isIphoneX: true
      })
    } else {
      this.setData({
        isIphoneX: false
      })
    }

3.当变量为true时增加底部padding50rpx

<cover-view style="padding-bottom: {{isIphoneX ? '50rpx' : '0rpx'}};" class='bottom-single-btn-box'>
      <cover-view class='bottom-single-btn' hover-class="none" bindtap='submitBtn'>
        <cover-view style="width:70rpx;">确 定</cover-view>
      </cover-view>
    </cover-view>

这样就解决啦~！让同事测了没问题，有好的方法欢迎补充！！！