[iOS Mobile Safari导航栏/工具栏有关方向更改的问题

Question

我在13.3上看到iOS移动浏览器的一些奇怪行为。

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

我相信问题与导航栏/工具栏以及隐藏状态如何增加视口有关。在iPhone 8 Plus上进行测试，当我加载页面并且显示条形图时，我看到了622px的高度。当我旋转到风景时，高度为414px。当我旋转回纵向时，这些条被隐藏（或减小为导航条），但高度仍为622px。这在页面底部留下了很大的空白。 window.innerHeight认为是622px。如果我打开和关闭导航栏，则视图将调整为我期望的样子。高度697px。

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

任何提示或解释都很好！

初始加载时：

切换为横向然后再次纵向后：

Answer 1

只是遇到相同的问题。如果我单击白色栏，工具栏将恢复，但所有dom点击事件都放错了位置。

这是我的解决方法：

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

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