微信小程序兼容手机底部横条适配

最新推荐文章于 2024-09-03 16:02:56 发布

supming1

最新推荐文章于 2024-09-03 16:02:56 发布

阅读量4.6k

点赞数 1

分类专栏：微信小程序

本文链接：https://blog.csdn.net/supming1/article/details/117370506

版权

微信小程序专栏收录该内容

16 篇文章 2 订阅

订阅专栏

方法一、

1、采用下面方式进行判断是否有底部横条

let res = wx.getSystemInfoSync();
if (res.model.indexOf('iPhone X') > -1 || res.safeArea.top > 20) {
      this.isAllScreen = true
};

注意，跟一些ui沟通时，可能他们会认为安卓上没有必要对底部进行抬高，所以可以把上面 res.safeArea.top > 20 部分去掉。

2、通过上面判断后，如果有斜杠，可以在底部增加68px padding或者如果布局采用的是定位的话，可以改变bottom的值.

方法二、

网上查到有人用下面方式兼容，采用方案是苹果方案，安卓机不支持。方式如下：

padding-bottom:calc(10px + env(safe-area-inset-bottom)/2);

注意：

1、10px是你原本不考虑底部横杆时布局的值

2、env、safe-area-inset-bottom 这篇文章介绍得很清楚 https://blog.csdn.net/sinat_24946363/article/details/105181622

3、ui可能更倾向于加68px，所以env(safe-area-inset-bottom)/2 中除以2其实是没有必要的，当然根据自己项目而定。另外，部分ui会要求在有悬浮按钮的时候，底部颜色跟悬浮按钮相同，没有悬浮按钮的时候与背景相同，所以虽然可以采用bottom调节定位，但采用padding-bottom更容易满足上述要求。