iOS Mobile Safari 导航栏/工具栏关于方向改变的问题

Question

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

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

我相信问题与导航栏/工具栏以及它隐藏时​​如何增加视口有关。在 iPhone 8 Plus 上进行测试，当我加载页面并显示条形图时，我看到高度为 622 像素。当我旋转到横向时，高度为 414px。当我旋转回纵向时，栏被隐藏（或导航栏缩小）但高度仍然是 622px。这会在页面底部留下很大的空白。window.innerHeight相信它是622px。如果我打开和关闭导航栏，则视图会根据我的预期进行调整；高度 697 像素。

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

任何提示或解释都会很棒！

在初始加载时：

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

Answer 1

刚刚遇到同样的问题。如果我单击白色栏，工具栏将恢复，但所有 dom 单击事件都会丢失。

这是我的走法：

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

这不会修复白条，但可能会修复点击事件问题。