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

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

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

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

$(window).resize(function () {if(sessionStorage.getItem('changeScreen') != 1){// alert('高度变化')sessionStorage.setItem('changeScreen',1)window.location.reload()}
})

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

前端实现微信公众号h5页面跳转小程序-成功案例
微信公众号h5页面跳转小程序-成功案例微信公众号h5页面跳转小程序-成功案例,标题已经明确说明,h5页面可以正常跳转微信小程序官网说可以,不是我说的文章目录微信公众号h5页面跳转小程序-成功案 ...
微信公众号h5页面跳转小程序
微信公众号h5页面跳转小程序文章目录微信公众号h5页面跳转小程序前言一.注意二.使用步骤步骤一:绑定域名步骤二:引入环境步骤三:初始配置前言问:h5 页面可以跳转至微信小程序吗? ...
微信公众号H5页面开发--微信JS-SDK引用
微信公众号H5页面开发–微信JS-SDK引用微信提供了微信公众号开发者手册,官方地址:https://mp.weixin.qq.com/ 公众号内许多复杂的业务场景,都是通过网页形式来提供服务,这时 ...
微信公众号H5页面开发怎么获取用户openid
微信公众号里会嵌套h5页面然后跳转,有时候我们就需要用到用户的openid,今天就为大家介绍一下公众号h5页面怎么获取openid 首先,需要用到公众号的appid,其次需要去公众号里配置好h5页面的 ...
微信公众号H5页面实现扫一扫功能
uniappH5实现扫一扫功能最近遇到一个需求,H5页面使用扫码绑定设备功能,因为uniapp uni.scanCode API H5不支持,网上找了很多方案不合适,因为这个项目是在公众里面运行的, ...
利用python生成微信h5_Python + Appium 微信公众号 H5 页面自动化测试
本文内容在以下环境运行成功: Windows10 Python2.7 android-sdk_r24.4.1 Appium-windows-1.15.1 chromedriver_2.40 小米手机 ...
微信公众号h5页面禁止用户调整字体大小
微信公众号内 h5页面,使用计算后的单位 rem 时,用户调整字体大小会导致页面字体.元素的宽高变大活变小,导致页面布局错乱使其拖拽后禁止修改页面基础字体大小 this.prohibitAndroi ...
微信公众号H5页面支付JSAPI
1:在微信环境下,我们需要获取到code,拿code去获取openid,在获取openid的时候有2种参数分别是:snsapi_base和snsapi_userinfo,snsapi_base只为获取 ...
微信公众号H5页面获取用户昵称头像等信息（Java）
H5页面获取微信用户信息操作流程 (一)获取微信权限,由微信用户确认 (二)获取相应的ACCESS_TOKEN和OPENID信息 (三)根据ACCESS_TOKEN和OPENID信息获取相应的用户信息 ...
RTFM：腾讯微信公众号H5页面使用微信支付爬坑记
一. 微信公众号支付的流程公众号的页面会在微信环境下打开,所以默认已经有登录态.openID.AppID.AppSecret 都能拿到,申请开通商家支付之后会有 PayKey 和 mch_id (商 ...

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

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

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

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

最新文章

热门文章