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

【问题标题】：iOS Mobile Safari Navigation Bar/Toolbar issue on orientation changeiOS Mobile Safari 导航栏/工具栏关于方向更改的问题
【发布时间】：2020-05-28 06:09:43
【问题描述】：

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

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

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

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

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

在初始加载时：

切换到横向再纵向后：

【问题讨论】：

我已经与这个（和其他问题）作斗争了好几天了，从我发现的情况来看，这似乎是预期的行为，或者出于某种原因无法修复。一个类似的问题是在横向模式下，底部的几个像素不响应触摸事件。制作 iOS 应用程序的诱惑与日俱增。 Apple 设计的 iOS Safari 可以很好地适用于简单的网站，但对于任何类似应用程序，Apple 希望我们制作一个 iOS 应用程序。真是令人沮丧。

标签： html css mobile-safari

【解决方案1】：

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

这是我的解决方法：

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

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

【讨论】：