zoukankan      html  css  js  c++  java
  • 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;
    	 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用于兼容处理键盘弹出后页面上拉的问题
        }
    };
    
  • 相关阅读:
    WPF 之Converter
    silverlight中 ComboBox绑定数据库,并获取当前选定值
    ComboBox联动 (AJAX BS实现)
    [推荐]Silverlight 2 开发者海报
    非常精彩的Silverlight 2控件样式
    一步一步学Silverlight 2系列文章
    POSIX 线程详解(经典必看)
    嵌入式 vlc从接收到数据流到播放视频的过程分析(经典)
    OpenGL ES教程系列(经典合集)
    Audio Queue Services Programming Guide(音频队列服务编程指南)
  • 原文地址:https://www.cnblogs.com/pomelott/p/11568011.html
Copyright © 2011-2022 走看看