微信浏览器“前进后退”的底部banner挡住了H5的底部banner

问题说明:

ios微信内置浏览器新增了“前进后退”的底部操作banner,在H5也包含 fixed在底部的banner时,进行前进后退操作后,会出现微信 banner 挡住 H5 的banner的情况。

解决思路:

1、 微信浏览器出现了底部操作banner后,页面的body会变化,需要重新矫正

2、当返回页面时,让页面执行矫正 js

<script>
    //解决IOS微信内置浏览器返回后不执行js脚本的问题
    var isPageHide = false;
    window.addEventListener('pageshow', function () {
        if (isPageHide) {
            setTimeout(function(){
                $("body").css('height',window.innerHeight)
            },200);
        }
    });
    window.addEventListener('pagehide', function () {
        isPageHide = true;
    });
</script>

代码中的 pageshow 用来解决ios 返回不执行 js 的问题

发表评论

电子邮件地址不会被公开。 必填项已用*标注