vue项目在移动端返回上一页空白

最新推荐文章于 2024-06-14 16:06:00 发布

原创最新推荐文章于 2024-06-14 16:06:00 发布 · 1.2k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#vue #ios

vue 同时被 3 个专栏收录

29 篇文章

订阅专栏

4 篇文章

订阅专栏

移动端适配

1 篇文章

订阅专栏

本文介绍了一个iOS内嵌Vue应用中遇到的白屏现象及其解决方案。问题表现为返回上一页时页面顶部出现空白，通过调整#app元素的定位及滚动属性解决了该问题。此外，还介绍了如何调整高度单位以适配iOS屏幕，彻底解决底部白边的问题。

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

问题：

vue的项目在iOS内嵌中运行时，返回上一页页面上半部分出现空白！但点击或者滑动，页面就回复正常了。

原因：

由于返回后无法将 body 的高度拉开，使得遮住，触发轻点击，方可消除遮罩针对此问题。
html、body都是100%，#app撑起了父元素的高度，但是浏览器默认的滚动scroll并不是#app，而是body。某些因素，造成返回history 后，无法复原，为此，我们将#app 进行了绝对定位，并让它重新成为 scroll 的对象，从而解决问题

网上解决方案：

html,body{
  height: 100%;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
}
#app {
  height: 100%;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  position: relative;
}

我添加在全局样式里之后，果然很好用，不再有白屏遮罩了！正在我开心之时，测试人员又给我提了个bug(说iOS手机的下半部分有一条白边，x以上的手机白条更宽！) 这是什么鬼！真的是一波不平一波又起啊！
后面了解到了iOS屏幕的问题我上面设置的100%，应该是指的content的铺满，但未把整个屏幕铺满

最后我把100%改为100vh就OK啦完美解决