即使在 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 放在正文中，这样文档就不会滚动，条形也不会隐藏。

如果 body 是 overflow: hidden，document.documentElement.clientHeight 也会得到没有横杠的高度。

Safari 总部的小伙子们说这一切都是设计的，他们打算保持这种方式，Chrome 也将很快实现它。真是一团糟。