小言_互联网的博客

IOS13系统升级带来的H5兼容性问题

339人阅读  评论(0)

  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">www.pingguoyul.cn</hw-entrance>
  
  </div>
  
  <!-- IOS13用于兼容处理键盘弹出后页面上拉的问题 -->
  
  <div id="bottomBackToView"></div>
  
  </div>
  
  接下来要添加样式:
  
  #app #bottomBackToView{
  
  display: block;
  
  width: 100%;
  
  height: 0;
  
  opacity: 0;
  
  }
  
  H5层面:通过监听焦点移除设
  
  oDom.addEventListener('blur', function (www.xinchenkg.com) {
  
  document.body.scrollTop www.xinchenptgw.cn= 0; // IOS12
  
  document.body.style.height www.shengsyLpt.cn= document.body.clientHeight; // IOS12
  
  backView.scrollIntoView(www.jintianxuesha.com); // 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用于兼容处理键盘弹出后页面上拉的问题


转载:https://blog.csdn.net/li123128/article/details/101163083
查看评论
* 以上用户言论只代表其个人观点,不代表本网站的观点或立场