如何在 Safari 中获得完整页面的 Web 应用程序？

Question

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

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

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

我想将页面高度设置为导航栏和状态栏之间的高度（如果它们显示），则为可用的屏幕高度。正在寻找 css 或 javascript 解决方案。

有人可以帮忙吗？

使用ios 11.2.6进行测试。

Answer 1

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

CSS

100vh

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

CSS

position: fixed; top: 0; bottom: 0

适合没有栏的视口的当前大小，并且当栏显示和隐藏时会改变，所以它更有用。但你无法做到一切

position: fixed

。

window.innerHeight

与

100vh

相同，所以不太好。

所以我知道从 JS 获得正确高度的唯一方法是制作一个

position: fixed; top: 0; bottom: 0

元素并测量它。然后您可以将该高度应用回其他元素，使它们适合屏幕，哦，但是当条形图显示或隐藏时，高度会发生变化。哎呀。

有时最好将整个网站放在

position:fixed

div 中，并将

overflow: hidden

放在正文中，这样文档就不会滚动，栏也不会隐藏。

如果身体是

overflow: hidden

，

document.documentElement.clientHeight

也会获得没有条形的高度。

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

Answer 2

我知道这是一个老问题，但这可能会有所帮助：

https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html