小程序(微信/字节)苹果手机底部小黑条优化

#小程序(微信/字节)苹果手机底部小黑条优化| 来源: 网络整理| 查看: 265

START

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

如下图

在这里插入图片描述

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

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

方案一

苹果官方推荐使用env()，constant()来适配，而env()和constant()函数有个必要的使用前提，当网页设置viewport-fit=cover的时候才生效。

padding-bottom: constant(safe-area-inset-bottom); /*兼容 IOS11.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

【本文地址】

公司简介

联系我们