解决微信端苹果手机IOS版本12以上输入内容后,点击弹出弹出框之后,背景图底部留有空白,且不能点击保存按钮

前几天写了一个公众号的几个H5界面,写完在测试的时候,发现一个问题。页面存在好几个单选按钮,还有输入框,我自己的安卓手机正常测试走流程是没有任何问题的,但是一用苹果手机测试就出现了问题:苹果手机在选择单选按钮之后,输入框输入内容之后,再点击提交按钮,弹出弹出框,会发现背景图底部留有空白,且弹出框上面的保存按钮不能点击,没反应,但自己滑动一下背景图,弹出框的按钮就可以点击了,查了很多资料,找了一段代码,在苹果手机上测试可以(测试是在QQ上看的),后来发现东西放到公众号上后,在微信端打开还是不行,同样的问题,而且还跟IOS版本有关,12以上的还是不行,最后还是找到了解决的办法,兼容IOS所有的版本:

     document.body.addEventListener('focusout', () => {

    //软键盘收起的事件处理

    let ua = window.navigator.userAgent;

    let app = window.navigator.appVersion;

    //$alert('浏览器版本: ' + app + '\n' + '用户代理: ' + ua);

    if(!!ua.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)) {

        //$alert('ios端');

var currentPosition, timer;

var speed = 1;

timer = setInterval(function() {

    currentPosition = document.documentElement.scrollTop || document.body.scrollTop;

    currentPosition -= speed;

    window.scrollTo(0, currentPosition); //页面向上滚动

    currentPosition += speed;

    window.scrollTo(0, currentPosition); //页面向下滚动

    clearInterval(timer);

}, 100);

    } else if(ua.indexOf('Android') > -1 || ua.indexOf('Adr') > -1) {

        //$alert('android端');

    }

})

完美解决以上问题。

你可能感兴趣的:(解决微信端苹果手机IOS版本12以上输入内容后,点击弹出弹出框之后,背景图底部留有空白,且不能点击保存按钮)