START
-
最近番茄在开发小程序(字节跳动的),遇到苹果手机底部有一个小黑条,看着很不舒服,坚决要把它优化一下。
-
如下图
- 记录一下,解决方案,以及自己研究的结果。
解决方案
百度到,有很多方案,去解决这个问题,太多,太杂了。有很多讲的是网页,而不是小程序,而我的需求是小程序,所以这里我就简单的列举一下,两种我尝试多次的方法。
-
方案一
-
苹果官方推荐使用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,没有底部小黑条没有问题
iPhone XR,padding出现,没有问题
iPhone 11 ,padding出现,没有问题
iPhone 12 ,没有padding,有问题,打印的居然是13,2
-
发现苹果12,打印出来的居然是,iPhone13,2
-
查阅相关博客
-
由上图得知,苹果12的设备型号为
iPhone13,2
-
但理论上来说,
wx.getSystemInfo
返回的res.model
。正确的应该是设备名称,即iPhone 12
,才符合之前的规则。这有可能是一个bug,而且微信,字节(wx.getSystemInfo
,tt.getSystemInfo
)都是返回iPhone 13,2
。 -
后续查阅了相关文档,如下图说明:
有关微信小程序和字节小程序
- 我在开发字节跳动的小程序,使用
wx.getSystemInfo()
获取手机信息的时候。由于疏忽,没有将wx
替换为tt
(字节跳动的简称),程序居然正常运行,这中间原理,我是不太理解了。。。可能做了某些处理吧。 - 总的来说,字节跳动的小程序槽点太多了,而且还没有相关博客文档(有,那也很简陋)。
- 吐槽归吐槽,也希望它逐步完善吧,加油。
END
- 就写到这里了,一是记录一下苹果底部安全距离优化;二是吐槽一下字节跳动小程序。
- 写于2021/03/10,后续看官方会不会修复了。