公司使用vue开发，可是在android微信中页面显示正常，在iOS中点击页面跳转却会显示异常，由于ios微信浏览器出现底部功能栏导致窗口视口高度变小，而由于单页面页面没有刷新导致定位错乱。
网上找了一些资料发现好多人是处理把底部的功能栏隐藏，通过对浏览器历史记录处理，是没有历史记录使隐藏底部功能栏，这里加入你需要记住历史记录，则需要单独存储历史记录，并进行相应的处理，会比较麻烦。因此写个笔记，给有需要的同学。
我们产品的需求是页面显示正常即可不强制隐藏微信底部的功能栏，这里H5的新属性pushstate就刚好用到。可以在页面初次加载时就添加历史记录主动调出微信的底部栏。这样就解决了布局错乱问题，也不用对历史记录的特殊处理。
思路有了代码也很简单，贴个我的代码
isIOS= !!navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)
if(fn.isIOS){
window.history.pushState({}, "title", "#");
}
公司使用vue开发，可是在android微信中页面显示正常，在iOS中点击页面跳转却会显示异常，由于ios微信浏览...
问题： 当网页在微信中打卡 进行了任意跳转 微信底部就会出现【向前 向后】的导航栏 此时页面底部元素被导航栏覆盖 ...
问题：在vue项目中使用了vue-router，页面刷新、浏览器前进后退都会导致导航菜单首页高亮显示 在导航栏点击...
问题：当我们在微信开发网页在ios下弹出键盘时会把页面给顶上去，当键盘消失页面看似下来了，实则并没有导致页面点不动...
规则5 - 将样式表放在顶部 将样式表放在文档底部就会导致在浏览器中阻止内容逐步呈现。为避免当样式变化时重绘页面中...
问题：在微信浏览器中调整页面的字体大小时，会打乱页面的整个布局 解决： 1.ios：ios的解决方案是覆盖掉微信的...
在做微信开发的时候，pdp页面中底部菜单栏中遇到了点击展开隐藏的问题：１．jQuery在pdp.phtml文件中不...
最近项目里面用到了底部的弹出提示框，UI小姐姐本着设计样式还是ios的好看原则。设计了一个ios样式的底部弹出提示...
微信网页内，在 iOS 下。弹出浮层，锁定浮层下不滚动，允许浮层内滚动 同时，页面有做底部触发懒加载的机制
问题描述： 项目中页面底部footer标签是fixed定位，输入法键盘弹出导致页面底部按钮上浮，由于时间紧迫，想到...
本文标题：vue单页面在iOS微信浏览器中弹出底部栏导致的样式问题
本文链接：https://www.haomeiwen.com/subject/uuvznftx.html
网友评论