iOS移动Safari导航栏/工具栏在方向变化时存在问题

Question

我在iOS 13.3的移动版Safari上看到了一些奇怪的行为。

我有一个网站，它主要是单页应用程序。因此，我将其高度/宽度保持在100％并调整内容以适应。在其他浏览器/设备上一切正常，但在iOS Safari上，从纵向模式切换到横向模式，然后再返回纵向模式时出现问题。

我认为问题与导航栏/工具栏有关，以及当它隐藏时视口会增加。在iPhone 8 Plus上测试时，当我加载页面并显示栏时，我看到的高度为622px。当我旋转到横屏时，高度为414px。当我再次旋转到纵向时，栏被隐藏（或导航栏缩小），但高度仍为622px。这留下了页面底部的大空白。window.innerHeight认为它是622px。如果我打开和关闭导航栏，则视图会调整为我所期望的高度697px。

如果我使用100vh而不是100％，则页面会延伸到栏后面。

有任何提示或解释都非常好！

最初加载时：

在切换到横向模式，然后再次转为纵向模式后：

- DJDMorrison

---

我现在已经为此（和其他问题）奋斗了几天，从我所发现的情况来看，似乎这要么是预期行为，要么是由于某种原因而不解决。类似的问题是，在横向模式下，底部的几个像素不响应触摸事件。制作iOS应用程序的诱惑力与日俱增。苹果已经设计了iOS Safari以适用于简单网站，但对于任何类似应用程序的内容，苹果希望我们制作一个iOS应用程序。这真的很令人沮丧。 - Indiana Kernick

Answer 1

刚遇到了同样的问题。 如果我点击白色条，工具栏会恢复， 但所有dom点击事件都错位了。

这是我的解决方法：

window.addEventListener('resize', () => {
  document.body.style.overflow = 'scroll';
  window.scrollTo(0, 0);
  document.body.style.overflow = 'hidden';
});

这不会解决白色条的问题，但可能会解决点击事件的问题。

- Xyzith