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

方法一、

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更容易满足上述要求。

微信小程序兼容手机底部横条适配相关推荐

微信小程序兼容ios底部导航栏边距
css代码 padding-bottom: constant(safe-area-inset-bottom); padding-bottom: env(safe-area-inset-bottom);
【小程序模板】功能模块+仿vivo手机商城微信小程序+品牌手机APP购物网页模板
[小程序模板]功能模块+仿vivo手机商城微信小程序+品牌手机APP购物网页模板源码简介与安装说明: 仿vivo手机商城微信小程序品牌手机app购物网页模板源码下载. 小程序源码下载地址:(82条 ...
解决微信小程序安卓手机访问不到图片，无法显示图片
关于微信小程序不显示图片通病可能有以下几个可能性: 非本地图片:确定图片资源存在,copy 图片url再浏览器打开,确定图片资源存在且能正常访问本地图片:确定相对路径或者绝对路径正确微信小程序图 ...
微信小程序怎么添加底部菜单按钮
继续微信小程序方面的教程,今天讲怎么在空白的小程序页面添加几个类似菜单的按钮,实现点击某个按钮跳转到对应界面,而不是单单局限于一个页面. 需要什么: 微信小程序账户电脑一台电脑安装微信开发者工具软 ...
微信小程序软件测试junit,微信小程序兼容性能测试方法
本文为微信小程序兼容.性能测试方法介绍. 兼容操作系统兼容由于小程序依赖微信客户端本身,因此理论上来说只要微信客户端兼容的小程序应该都可以兼容,这里推荐覆盖Android和iOS主流版本系统即可, ...
微信小程序获取手机验证码短信验证码后端功能实现解析
本文原创首发CSDN,链接 https://mp.csdn.net/console/editor/html/106041472 ,作者博客https://blog.csdn.net/qq_414641 ...
微信小程序开发错误——底部导航栏没有显示完全
微信小程序开发错误--底部导航栏没有显示完全原因:由于在app.json中设置跳转页面时,假设有A.B.C.D四个图标(点击可以跳转),B和C的跳转页面相同,C的图标就会覆盖B的图标,B的图标就相当 ...
# 解决微信小程序遮罩层底部页面滚动
解决微信小程序遮罩层底部页面滚动一.wxml文件添加catchtouchmove="move". <view class="" class=" ...
实现微信小程序和手机app远程控制51单片机控制L298N电机驱动器控制马达（ESP8266 AT89S52 http请求转串口通信系统 mqtt ）
首先你有这样的8266 这种8266自身带2个按键和烧录芯片方便调试,综合性价比较高. 还有就是你需要有一个51单片机或者其他芯片都行.有了这2个芯片我们开始吧! 1.先看一段视频效果演示,再来介绍实 ...

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

微信小程序兼容手机底部横条适配相关推荐

最新文章

热门文章