iOS新版微信底部返回横条问题
之前没有怎么接触过微信开发,只是对H5比较熟。最近维护一个微信公众号的项目,遇到了iOS端返回键的坑。
描述一下:
从公众号打开页面后,底部有个返回的小横条,恰好也挡住了页面。这不行啊,得解决。
页面的高度是调用 $(window).height();
来获取的,但道理来讲应该没什么问题。
第一个反应是,要不判断一下设备,如果是iOS则给添加一个高度?
这个想法还没实行呢,就发现了一个现象。第一次进来的时候是挡着的,但是刷新一下就不挡了。然后就想着要不判断第一次进来给个刷新?
然后落实了,改代码。的确没有问题,进来之后会判断是否第一次,如果是第一次则刷新页面。刷新之后页面高度显示正常。
但是在页面加载后刷新,会有很明显的跳转,也耗资源。不是最好的解决方式。然后继续整改。
最后还是得从源头出发,找到为什么会有底部的小横条。
一般的,如果是第一个界面,是没有底部横条的。当页面发生跳转后,会有底部小横条。
然后我就在页面中找跳转,最后发现,有几行代码是给当前添加历史记录的!
代码如下:
function(){ pushHistory();window.addEventListener("popstate", function(e) {WeixinJSBridge.invoke('closeWindow',{},function(res){ });}, false); function pushHistory() { var state = { title: "title", url: "#" }; window.history.pushState(state, "title", "#"); }
}
分析一下代码,这里其实就是 添加一个历史记录,有了历史记录,微信的小横条就会出来,Android的返回键就可以监听到。然后这里修改了返回事件,当点击返回时触发关闭当前页面。
我觉得这个代码应该是微信公众号开发里面比较常用的一种方式。在以前的话,也没什么问题,可以返回关闭页面,比较方便。但是升级之后,微信多出来底部的返回条,而页面高度是在之前取的值,那么页面的高度就是未加横条的高度,横条出现后自然会遮挡住页面内容。
解决方式也很简单,把这段代码 提前,提前到获取高度之前,这样的话先有了横条,再有高度,则高度刚刚好是中间部分,这样就不会有遮挡问题
iOS新版微信底部返回横条问题相关推荐
- 如何用CSS适配iPhoneX底部小横条
如何用CSS适配iPhoneX底部小横条 前言 iPhoneX 取消了物理按键,改成底部小黑条,这一改动导致网页出现了比较尴尬的屏幕适配问题.对于网页而言,顶部(刘海部位)的适配问题浏览器已经做了处理 ...
- iphone隐藏底条_iphone隐藏底部小横条,无需越狱
iphone更新的速度还是依然如此在每年的秋季发布会更新它的最新产品,跟新到现在已经为全面屏的机型,相比之前的屏幕尺寸,全面屏真的是很不错,虽然全面屏非常的出色,但也有很多小伙伴是不喜欢的,如上方的刘 ...
- h5页面在新版微信iOS 端出现底部白色导航条
新版微信在苹果iOS 端的h5页面如果有路由跳转,会出现底部白色导航条,出现此情况的原因是: 由于底部导航栏是因为出现history记录才出现的.使用replace就没有history记录,解决办法 ...
- 解决并隐藏h5页面在新版微信iOS 端出现底部白色导航条
新版微信在苹果iOS 端的h5页面如果有路由跳转,会出现底部白色导航条.会占用页面的高度,如何去解决这个问题呢. 方案一 页面跳转时重新定页面的高度,这样处理导航条仍然存在. 方案二 使用histor ...
- 如何适配处理iphoneX底部的横条 - ios
iphoneX手机取消了实体Home键,取而代之的是主界面底部不显眼的横条"Home Indicator".当网页底部fixed 元素时候,一部分元素可能就被这个横条遮挡住,怎么适 ...
- 如何适配处理iphoneX底部的横条 ?(转)
iphoneX手机取消了实体Home键,取而代之的是主界面底部不显眼的横条"Home Indicator".当网页底部fixed 元素时候,一部分元素可能就被这个横条遮挡住,怎么适 ...
- uniapp兼容iPhoneX头部状态栏(刘海屏)和底部小横条
文章目录 (一)兼容 iphoneX 头部状态栏 方式一:封装状态栏组件 statusBar.vue 方式二:不封装组件 方式三:使用 Vuex 管理 完整demo展示: (二)兼容 iPhoneX ...
- 适配处理iphoneX底部的横条
iphoneX手机取消了实体Home键,取而代之的是主界面底部不显眼的横条"Home Indicator".当网页底部fixed 元素时候,一部分元素可能就被这个横条遮挡住,怎么适 ...
- 苹果微信html页面缓存,Ios中微信页面返回上一页去除缓存几种常见思路
前言 这篇文章主要讲解决思路,不对各种概念进行过多讲解. 问题描述 开发微信H5页面的时候,在Ios微信内置浏览器中点击返回按钮返回上一页时,上一页面不会被刷新. 在浏览器缓存机制中,在返回上一页的操 ...
最新文章
- Linux(64位)下OpenBabel 2.4.1、python2.7和Ipython实战(二)
- java 调用win32 api 学习总结
- Keil使用PC-Lint
- mysql数据库查询笔记_MySql数据库基础笔记(一)
- ajax存储单个数据_科学家现在可以使用单个原子存储数据
- java 怎么链接ndk的库_使用ndk-build链接现有的静态库
- python django 动态网页_python27+django1.9创建app的视图及实现动态页面
- python画图代码-Python实战小程序利用matplotlib模块画图代码分享
- pygame安装_pygame教程(一):基础知识
- python基础-文件处理与函数
- SpringCloud第一章 Euraka服务注册与发现组件
- 【贪心算法】哈夫曼编码问题
- 病毒conime.exe、mmlucj.exe、severe.exe 查杀办法
- 我们无法更新系统保留的分区_什么是系统保留分区,您可以删除它吗?(Windows10 科普)2020...
- bash: yum:未找到命令
- 15年学不会英语的原因
- NoScope:极速视频目标检测
- Quantal Response Equilibrium调研
- 简单的基于Tacotron2的中英文混语言合成, 包括code-switch和voice clone. 以及深入结构设计的探讨.
- All In One - 第7章 安全运营
热门文章
- vue 是否有word编辑控件_GitHub - C84882428/editor-ui: vue集成 tinymce 富文本编辑器,增加导入 word 模板...
- 调用接口返回500_公交卡余额查询接口开放使用啦!
- java中同步组件_Java并发编程(自定义同步组件)
- 交流电的有效值rms值_交流电路的功率三角因数原来是这样理解的
- java json utf-8_Java 编码 和JSON
- Exynos4412 中断驱动开发(二)—— 中断处理流程分析
- BMP图像文件格式分析附带图解
- 定时关机,适用于windows系统
- React开发(185):ant design table控制居中和宽度
- [vue] vue部署上线前需要做哪些准备工作?