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

Question

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

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

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

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

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

初始负载:



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

Answer 1

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

这是我的解决方法:

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

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