IOS13系统升级带来的H5兼容性问题
20号新推送的IOS13给很多app厂商和RD带来了便秘的感觉,目前复现的问题如下,后续还会持续更新:
1.H5 hybrid输入框导致的页面上移,卡住不动。收起减半后,页面出现半截白屏。(IOS12 + IOS13)
IOS12会在键盘弹出时将页面上推,并压缩body的高度。
IOS13会在键盘弹出时将页面上推,但html,body的高度全部不变。
目前移动端的输入框不外乎一下三种:
(1)原生input
(2)可编辑DIV
(3)自家或他家的富文本编辑器
我司目前使用第二种方案,即可编辑DIV+本地原声虚拟键盘(后续会改为原声H5键盘),可从两个层面解决上述问题。
首先需要在根节点最底部添加一个占位的DIV,并且设置不可见。
<div id="app">
<div v-if="loadingFlag && !timeoutFlag" class="hw-box">
<hw-entrance class="do-entrance"></hw-entrance>
</div>
<!-- IOS13用于兼容处理键盘弹出后页面上拉的问题 -->
<div id="bottomBackToView"></div>
</div>
接下来要添加样式:
#app #bottomBackToView{
display: block;
width: 100%;
height: 0;
opacity: 0;
}
H5层面:通过监听焦点移除设置
oDom.addEventListener('blur', function () {
document.body.scrollTop = 0; // IOS12
document.body.style.height = document.body.clientHeight; // IOS12
backView.scrollIntoView(); // IOS13用于兼容处理键盘弹出后页面上拉的问题
})
上述解决方法在非可编辑DIV的方案中也许时能够解决问题的,但是在Hybrid H5中可编辑DIV还有其他各种兼容性问题,在此,我们的最终解决方案时需要IOS配合解决的,利用IOS监听键盘收起然后做对应的处理:
bridgeClass.jsEventHook.keyboardWillHide = function() {
if (!switchFlag) {
document.body.scrollTop = 0; // IOS12
document.body.style.height = document.body.clientHeight; // IOS12
backView.scrollIntoView(); // IOS13用于兼容处理键盘弹出后页面上拉的问题
}
};
IOS13系统升级带来的H5兼容性问题的更多相关文章
- 64位WINDOWS系统环境下应用软件开发的兼容性问题(CPU 注册表 目录)
应用软件开发的64 位WINDOWS 系统环境兼容性 1. 64 位CPU 硬件 目前的64位CPU分为两类:x64和IA64.x64的全称是x86-64,从名字上也可以看出来它和 x86是兼容的,原 ...
- h5+js视频播放器控件
由于h5兼容性问题,很多浏览器对于插入视频播放的支持都大不相同.火狐支持的比较完整,谷歌则支持的不是很好,很多功能都不能实现,这就需要我们去自制一个播放界面,去兼容不同的浏览器. 只插入一个视频时,浏 ...
- VS Build目录下各文件的作用
VS2010中各种类型文件的作用: .sln 相当于VC6中 .dsw .vcxproj 相当于VC6中 .dsp .suo 相当于VC6中 .ncb .vcxproj.filter ...
- 什么是 .manifest 文件
恩,为了大家都能很方便的理解,我将尽量简单通俗地进行描述. [现象]对这个问题的研究是起源于这么一个现象:当你用VC++2005(或者其它.NET)写程序后,在自己的计算机上能毫无问题地运行,但是当把 ...
- UEFI,BIOS,MBR,
UEFI启动是一种新的主板引导项,正被看做是有近20多年历史的BIOS 的继任者.顾名思义,快速启动是可以提高开机后操作系统的启动速度.由于开机过程中UEFI的介入 第一:安全性更强 UEFI启动需要 ...
- 磁盘磁盘MBR与GPT的区别
基本磁盘与动态磁盘 磁盘的使用方式可以分为两类:一类是“基本磁盘”.基本磁盘非常常见,我们平时使用的磁盘类型基本上都是“基本磁盘”.“基本磁盘”受26个英文字母的限制,也就是说磁盘的盘符只能是2 ...
- (转)GPT磁盘与MBR磁盘区别
摘要: Windows 2008磁盘管理器中,在磁盘标签处右击鼠标,随磁盘属性的不同会出现“转换到动态磁盘”,“转换到基本磁盘”“转换成GPT磁盘”,“转换成MBR磁盘”等选项,在此做简单介绍.部 ...
- MFC应用程序配置不正确解决方案(manifest对依赖的强文件名,WinSxs是windows XP以上版本提供的非托管并行缓存)
[现象] 对这个问题的研究是起源于这么一个现象:当你用VC++2005(或者其它.NET)写程序后,在自己的计算机上能毫无问题地运行,但是当把此exe文件拷贝到别人电脑上时,便不能运行了,大致的错误提 ...
- 企业SOA架构案例分析
面向服务的架构(SOA)是一个组件模型,它将应用程序的不同功能单元(称为服务)进行拆分,并通过这些服务之间定义良好的接口和契约联系起来.接口是采用中立的方式进行定义的,它应该独立于实现服务的硬件平台. ...
随机推荐
- Scrum Master如何让敏捷团队正常运转?
官方<Scrum指南>中定义:Scrum Master在Scrum团队中属于服务型领导,负责践行和支持<Scrum指南>中定义的Scrum,要帮团队的每个人理解Scrum理论. ...
- 种族并查集模板题分析 -----P2024 [NOI2001]食物链
本文参考了:洛谷p2024题解 题目描述 动物王国中有三类动物 A,B,C,这三类动物的食物链构成了有趣的环形.A 吃 B,B 吃 C,C 吃 A. 现有 N 个动物,以 1 - N 编号.每个动物都 ...
- ATX agent+UIautomation2 自动化测试介绍
纯搬运贴,内容几乎来源于作者的几篇介绍文章,这里做了整合 目前ATX+UIautomator2 处于自动化界的浪口风尖,现在有幸终于有时间对ATX进行了粗浅的了解 为什么要用ATX ATX+UIaut ...
- CEF避坑指南(一)——下载并编译第一个示例
CEF即Chromium Embedded Framework,Chrome浏览器嵌入式框架.它提供了接口供程序员们把Chrome放到自己的程序中.许多大型公司,如网易.腾讯都开始使用CEF进行前端开 ...
- 求平方根算法 Heron’s algorithm
求平方根问题 概述:本文介绍一个古老但是高效的求平方根的算法及其python实现,分析它为什么可以快速求解,并说明它为何就是牛顿迭代法的特例. 问题:求一个正实数的平方根. 给定正实数 \(m\),如 ...
- (springboot)自定义Starter
要引入的jar项目,即自定义的Starter项目: pom:(这里不能引入springboot整合否则测试项目注入失败) <?xml version="1.0" encodi ...
- java学习之- 线程继承Thread类
标签(空格分隔): 线程 在java.lang包中有个Thread子类,大家可以自行查阅文档,及范例: 如何在自定义的代码中,自定义一个线程呢? 1.通过对api的查找,java已经提供了对线程这类事 ...
- js 截屏保存图片
html2canvas.js 这个js有个强大的功能,就是能将html 对应的dom生成canvas. 这样,我们就可以通过生成的canvas转化成 base64 图片,从而实现截屏功能: 核心代码如 ...
- unity之中级工程师
主要是实际操作. Destroy(游戏对象):会真正销毁游戏对象. 动态链接库 热更新:用户不需要更新整个项目,只需要更新需要更新的部分,使用AssetBundle.PC,Android可以使用逻辑热 ...
- Codeforces 1004E
题意略. 思路: 这k个点应该放在这棵树的直径上,并且能连成一条路径.如果k比树的直径上的点要多,那么我们就不用把这k个点都用上, 只需要把这棵树直径上所有的点都覆盖上就行了.如果k比树的直径上的点要 ...