跳到主要内容

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

· 1 分钟阅读
lzw.

问题说明:

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 的问题