javascript - 即使在 Safari 中如何获得完整页面的网络应用程序？

Question

我正在构建一个全页网络应用程序，它在 Chrome 中运行得很好，但在 Safari Mobile 中却很不稳定。这是因为 safari mobile 的导航栏位于顶部，另一个栏位于底部。我怎样才能为他们创建我的页面帐户？我已经研究这个问题好几个星期了，并尝试了每一个建议。我希望这里有人能提供帮助。

如何获得有或没有顶部和底部栏的高度？事实上，我并不真正想要这两个栏，但据我所知，除了用户将应用程序添加到主屏幕之外，没有办法摆脱它们。如果我的用户还没有将其添加到他们的首页，我必须考虑条形的高度。我必须考虑它们的原因是我的页面有一个 map ，它必须有固定的高度才能显示，它不能是 flex 的。我还在屏幕的顶部和底部放置了按钮和用户控件，它们必须始终可见。

现在发生的情况是，有时内容会跳转到导航栏下方，因此这些控件变得无法使用。

我想将页面高度设置为导航栏和状态栏之间的高度(如果它们显示)，即可用的屏幕高度。寻找 CSS 或 JavaScript 解决方案。

有人可以帮忙吗？

使用 ios 11.2.6 进行测试。

Answer 1

这整件事实在是太臭了。我真的没有解决方案 - 我认为没有人知道 - 但这是我所知道的。

CSS 100vh 是 Safari 视口(viewport)的最大高度，即隐藏栏。因此，如果显示了条形，则说明它太大了，并且东西可能会像您所看到的那样进入条形下方。

CSS 位置:固定；顶部:0； Bottom: 0 适合没有栏的视口(viewport)的当前大小，并且当栏显示和隐藏时会改变，所以它更有用。但你不能让所有的东西都position:fixed。

window.innerHeight 与 100vh 相同，所以这不太好。

所以我知道从 JS 获得正确高度的唯一方法是创建一个 position:fixed;顶部:0； Bottom: 0 元素并测量它。然后，您可以将该高度应用回其他元素，使它们适合屏幕，哦，但是当条形图显示或隐藏时，高度会发生变化。哎呀。

有时最好将整个网站放在 position:fixed div 中，并将 overflow:hidden 放在正文中，这样文档就不会滚动酒吧永远不会隐藏。

如果正文是 overflow: hide，document.documentElement.clientHeight 也会获取不带栏的高度。

Safari 总部的员工表示，这一切都是设计使然，他们打算保持这种方式，Chrome 也将很快实现它。真是一团糟。