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

最新推荐文章于 2024-05-16 08:30:39 发布

红孩儿2011

最新推荐文章于 2024-05-16 08:30:39 发布

阅读量930

点赞数

文章标签： ios 苹果兼容问题

本文链接：https://blog.csdn.net/qq_26642611/article/details/105614418

版权

本文详细探讨了iOS13系统更新后，H5 Hybrid应用中输入框导致的页面上移和卡顿问题。针对不同类型的输入框，提供了包括原生input、可编辑DIV和富文本编辑器在内的多种解决方案。通过添加占位DIV和监听焦点移除，有效解决了键盘弹出时页面显示异常的问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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用于兼容处理键盘弹出后页面上拉的问题
    }
};