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

最新推荐文章于 2022-12-08 16:09:16 发布
最新推荐文章于 2022-12-08 16:09:16 发布
阅读量1.5w 收藏
点赞数
分类专栏： 布局
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/youngeffort/article/details/84249449
版权

现象：新增前进后退导航栏

问题产生原因：新增导航栏使网页脱离文档流的屏幕高度变小

解决方案：

           布局时考虑到影响脱离文档流的底部元素即可根据需要合理布局

 

 

youngeffort
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
专栏目录
企业公众号增加对接h5页面底部菜单
自述天地
06-22 1364
登录微信公众号后台 如果自定义菜单可以直接用，就可以在这里创建 我的方式：通过代码 根据微信接口文档https://developers.weixin.qq.com/doc/offiaccount/Custom_Menus/Creating_Custom-Defined_Menu.html 需要直接跳转h5页面 已有对应 URL 使用 创建菜单接口 新建一个信任管理类 （网上找的） package com.bootdo.sharebus.token; import java....
微信浏览器禁止浏览器后退
alize的博客
08-16 3599
history.pushState(null, null, document.URL); //禁止网页返回上一页 window.addEventListener('popstate', function() { history.pushState(null, null, document.URL); });
解决IOS微信浏览器底部会出现向前向后返回按钮，返回不刷新的问题
10年职场两茫茫，35岁凄凉奈若何
04-22 849
解决IOS微信浏览器底部会出现向前向后返回按钮，返回不刷新的问题
IOS下的微信H5页面的底部前进后退横栏的适配问题
xiaomajia029的博客
08-30 2万+
Question：最近做一个在微信和支付宝内置浏览器中运行的移动web界面，前几个月ios微信更新之后，微信将后退的按钮移至了底部横栏，遮挡住了原先底部的操作按钮。由于之前的页面设计是整屏显示禁止触摸滚动效果的，就想着是不是可以隐藏微信内置的底部横栏。 Answer： 1. 经过查资料，很多人说可以调用Weixin为H5应用提供开放原生能力的JS接口来隐藏/显示底部的状态栏。代码如下： d...
vue项目 ios 微信内置浏览器 H5页面授权后 有返回按钮问题
哼哼哼哼哼
05-08 3728
ios 微信的内置浏览器 会出现返回键 点击的时候是不触发 window.addEventListener("popstate",this.isBack,false) 这个方法的 所以下面讲下我的处理方法： 微信 需要授权 而授权得时候 需要跳转到 code页面 使用 location.replace next({ path: store.state.token.after_login_go, replace: true }); router.replace('/'...
iOS新版微信底部工具栏遮挡问题完美解决
01-03
造成该现象的原因是，当页面跳转时，微信浏览器会通过window.history读取到浏览的历史记录，此时便会在页面底部显示出前进后退按钮的工具栏，造成页面底部内容遮挡。 三、解决方案： 了解了该问题出现的原因，我们...
使用vue完成微信公众号网页小记(推荐)
11-26
公司最近有一个H5页面的功能，比较简单的一个调查表功能，嵌套在我们微信公众号里面。选用的技术栈是Vue。同时用到了微信的登录和分享接口。ps:本人小白，如果有问题希望大家能指出来，写文章不止是为了记录，还是...
苹果浏览器微信底部返回栏显示/隐藏的问题
01-07
此段js代码完美解决 ; (function () { try { isIOS = !!navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/) if (fn.isIOS) { // window.history.pushState({}, title, #); document.addEventListener...
微信公众号真机调试（详细说明文档有截图）
03-23
1.使用TBS Studio进行微信公众号真机调试扫描二维码报错无法安装线上TBS内核，原因是微信内置浏览器 x5内核以弃用升级到最新的xweb内核； 2.本方法是在最新版微信基础上真机公众号调试，手机电脑同屏利用浏览器的...
iOS新版微信底部返回横条问题的解决
01-03
最近维护一个微信公众号的项目，遇到了iOS端返回键的坑。 描述一下： 从公众号打开页面后，底部有个返回的小横条，恰好也挡住了页面。这不行啊，得解决。 页面的高度是调用 $(window).height();来获取的，但道理来...
html页面跳转先显示底部,H5页面在IOS微信中跳转时，会出现底部工具栏，遮挡页面底部内容...
weixin_33240461的博客
06-03 2110
问题描述：在IOS微信中打开H5页面，当浏览器内出现跳转产生url历史记录时，页面底部会出现一个带有前进和后退按钮的工具栏，会遮挡页面底部的内容。css分析缘由：页面跳转时，微信浏览器经过window.history读取到浏览的历史记录，此时便会在页面底部显示出前进后退按钮的工具栏，形成页面底部内容遮挡。但刷新一下该页面，就不会遮挡了。底部的工具栏是在页面完成渲染以后才渲染的。html解决方案：i...
H5 解决ios 屏幕下方返回键页面不刷新的问题
txw0415的博客
06-17 517
H5 页面返回不刷新
解决iOS微信底部返回横条问题
の小蛋壳世界
11-05 1万+
最近做微信公众号的开发，遇到 iOS新版微信的底部会出现返回小横条的坑。从公众号打开页面，底部有个返回的小横条，会遮挡页面底部。但是再刷新一下该组件页面，就不会遮挡了。其实就是第一次出现小白条时，页面高度获取会有问题。 #####一、解决部分问题 查资料得知**小横条的出现是因为页面跳转产生历史纪录。**所以我想，使网站不存在历史纪录，没有返回，从而不出现小横条。那么可以使用location.r...
iOS新版微信底部返回横条问题
热门推荐
技术熊的博客小窝
09-06 2万+
之前没有怎么接触过微信开发，只是对H5比较熟。最近维护一个微信公众号的项目，遇到了iOS端返回键的坑。 描述一下： 从公众号打开页面后，底部有个返回的小横条，恰好也挡住了页面。这不行啊，得解决。 页面的高度是调用 $(window).height();来获取的，但道理来讲应该没什么问题。 第一个反应是，要不判断一下设备，如果是iOS则给添加一个高度？ 这个想法还没实行呢，就发现了一个现...
IOS 导航栏返回后首页底部工具栏不见了
dlm_211314的专栏
01-01 640
基于UITabBarController的底部工具栏，隐藏底部工具栏的方法是： viewController.hidesBottomBarWhenPushed = true 这个方法只能在第二UIViewController中使用，不能在UINavigationController的rootController使用，否则会导致回到第一个UIViewController中底部工具栏不见了的情况 重写UINavigationCotroller 的func pushViewController(_ v.
ios跳转底部出现前进后退白条解决方案
岩的博客
08-24 1707
问题描述： 开发项目时，页面中有个跳转其他页面操作。在ios展示端底部会出现前进后退的白条，如下图 造成影响：会导致一部分背景图被遮挡。 原因：由于页面跳转新的页面，上一个页面会被存储，ios端底部白条会被唤醒。 解决方案：尝试着去避免出现。 研究后发现，如果使用的是href,就会出现以上现象。 window.location.href="{:url('index')}"; 可以选择使用replace这个属性方法去处理。 demo： <!DOCTYPE html> &
移动端H5常见问题
娃哈哈_的博客
12-28 1065
1、click事件，a href无效在APP中无效： 场景：H5中绑定了click事件进行页面跳转，微信浏览器，手机内置浏览器测试没问题。内嵌到某APP中，点击事件无效，通过a标签href跳转也无效（IOS无效，安卓有效） 解决方法： 将click事件换成touchend事件进行跳转页面。 2、swipe组件，上滑翻页，在移动端真机环境中有闪白屏情况 场景：做一个活动H5页面，有上滑翻页效果。用到了swipe组件，在微信开发者平台中测试没问题。到真机上，一滑屏翻到下一页，就有闪屏效果，出现频率很高。 解决方
如何隐藏微信内置底部前进后退的按钮？
小草莓的博客
04-28 9822
在微信H5中，会有下面一个问题： 使用window.location.href进行页面跳转或者 react 内部项目使用 this.props.history.push 进行页面跳转时，做好的 h5 页面放在微信里，底部会出选前进后退的按钮，如下图： 解决方案如下：（适用于特殊场合） 第一种情况：如果只是页面之间跳转，使用 window.location.replace 代替w...
微信小程序-获取设备信息，状态栏/导航栏/内容/tabBar高度设置
慢慢manman的博客
12-08 3480
微信小程序获取设备信息，状态栏、导航栏、内容、tabBar高度设置。
ios下的微信h5页面的底部前进后退横栏如何隐藏或者解决?
最新发布
01-30
在iOS下，微信H5页面的底部前进后退横幅可以通过以下几种方法进行隐藏或解决： 1. 使用JavaScript代码进行隐藏：可以利用JavaScript代码来控制页面的样式，通过设置底部横幅的display属性为none来隐藏该横幅。在页面加载完成后，通过执行JavaScript代码来实现底部横幅的隐藏，例如：document.getElementById('MenuBarContainer').style.display = 'none'; 2. 使用浏览器内核CSS样式进行调整：在iOS设备中，微信浏览器采用了Webkit内核，可以利用相关的CSS样式来调整页面的显示效果。通过添加特定的CSS样式来控制底部横幅的显示与隐藏，例如：-webkit-overflow-scrolling: touch;可以禁止底部横幅的出现。 3. 与微信官方联系解决：如果以上方法不能解决问题，可以向微信官方反馈该问题，或者寻求他们提供相应的解决方案。微信官方可能会对该问题进行修复或者提供相关的技术支持。 总的来说，通过JavaScript代码控制样式、调整CSS样式或者向微信官方反馈问题，都是可以尝试的方法来隐藏或解决iOS下微信H5页面的底部前进后退横栏的显示问题。希望以上方法能够帮助到你解决该问题。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值