解决方案：

例如：有三种办法:
1.一棒子打死法，直接给这个页面添加padding
缺陷：安卓机型不需要这个padding导致与页面底部不能紧密贴合，影响操作

2.调取获取设备信息的接口再进行判断，这用uni-app举例子直接调用uni.getSystemInfo(OBJECT）方法判断他的system(操作系统名称及版本)字段是否为ios10及其以上然后再动态绑定页面的padding
缺陷：较为麻烦

3.第三种，ios新增特性： CSS 函数，用于设定安全区域与边界的距离，有四个预定义的变量：
safe-area-inset-left：安全区域距离左边边界距离
safe-area-inset-right：安全区域距离右边边界距离
safe-area-inset-top：安全区域距离顶部边界距离
safe-area-inset-bottom：安全区域距离底部边界距离 (默认的是34px)
以上四个都是有默认值的
再利用css的constant以及env函数（ ios11.2版本以后constant废弃，env生效为了兼容ios11一下建议两个都写上并且constant写在env的前面
例如：
padding-bottom:constant(safe-area-inset-bottom);
padding-bottom:env(safe-area-inset-bottom);
如果想要自定义边距就需要用到css 的动态计算函数calc()
例如想要一个20的padding-bottom ：
padding-bottom: calc(env(safe-area-inset-bottom) - 14px)

解决ios小程序，app底部黑线问题相关推荐

解决微信小程序 app onLaunch异步请求，在没有请求执行完就加载首页了的问题
今天在调试小程序的过程中,进了一个坑,程序加载需要先获取用户信息,然后保存到Storage中,然后首页去 Storage取信息,根据用户信息去查本地服务器数据列表,可是发现第一次进入的时候,数据总是加 ...
解决微信小程序“app.json: [“workers“] 字段需为目录“错误及worker的使用
我们如果遇到[ miniprogram/app.json 文件内容错误] miniprogram/app.json: ["workers"] 字段需为目录(env: Window ...
android studio运行手机时出错怎么解决_小程序 android ios h5解决方案
你现在开发android,ios,小程序用什么工具,怎么开发的?还在单个端的开发吗?今天我们主要讨论的是一次开发多端使用的技术,也是这两年比较流行的开发方向.现在的终端太多了,app两个端androi ...
开发语音录入_语言翻译小程序app开发解决了人们的语言障碍问题
随着经济的发展,人们经济水平的提高,促进了国际交流越来越频繁,人们出国的次数也是越来越多.但是语言交流也是日常的障碍,给诸多的人带来不便.出国旅游要是语言不通还会影响旅游质量.语言翻译小程序的开发,便 ...
解决微信小程序IOS中使用picker弹出内容和手机软键盘重叠的问题
解决微信小程序IOS中使用picker弹出内容和手机软键盘重叠的问题项目需求: 一个信息提交页面:有input输入框,有picker选择器遇到的问题: 点击input输入框时,手机自动弹出键盘,但 ...
解决小程序自定义底部菜单切换闪动
解决小程序自定义底部菜单切换闪动业务上可能会有一个需求使用自定义底部菜单相信会有很多人遇到过这个需求但是自定义底部菜单会有一个问题,在点击切换页面的时候底部菜单会重新加载,导致页面闪动,比较影响用 ...
解决微信小程序ios端滚动卡顿的问题
解决微信小程序ios端滚动卡顿的问题参考文章: (1)解决微信小程序ios端滚动卡顿的问题 (2)https://www.cnblogs.com/goloving/p/10563472.html 备 ...
# 解决微信小程序遮罩层底部页面滚动
解决微信小程序遮罩层底部页面滚动一.wxml文件添加catchtouchmove="move". <view class="" class=" ...
Taro小程序，底部输入框获取键盘高度动态设置bottom有延迟解决
Taro小程序,底部输入框获取键盘高度动态设置bottom有延迟0.5s左右业务场景: Taro+TaroUI+微信小程序底部固定了一个输入框,当聚焦时输入框自然要上推页面才合理.但不能设置adj ...

解决ios小程序，app底部黑线问题

解决方案：

解决ios小程序，app底部黑线问题相关推荐

最新文章

热门文章