解决ios微信公众号h5页面新增底部前进后退导航栏产生的布局问题

本文介绍了一种解决微信底部导航导致的布局错乱问题的方法。通过监听窗口大小变化并使用节流技术来实现页面的自动刷新,有效解决了因导航栏出现而导致的布局异常现象。

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

现象:第一次出现微信底部默认导航的时候布局会错乱(在项目中底部弹窗显示不完整),在出现错乱的页面刷新又能恢复正常。

问题产生原因:新增导航栏使网页脱离文档流的屏幕高度变小,有些布局没有重新计算(更加具体的原因就没有管了,项目已经是一个成熟的项目,用的框架也不是新框架,会存在样式穿透的问题,很多东西还是少动为妙)。

问题分析和解决:底部导航栏是因为出现history记录才出现的,再加上我所作的项目刷新一下页面就能恢复正常。优先考虑在出现history后重新加载页面,监听屏幕高度变化(安卓机不会新增导航),再利用session 做一个节流,避免多次触发

$(window).resize(function () {
    if(sessionStorage.getItem('changeScreen') != 1){
       // alert('高度变化')
        sessionStorage.setItem('changeScreen',1)
        window.location.reload()
    }
})
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值