Coc*_*oco 2 html javascript css mobile-safari
我正在构建一个全页面的网络应用程序，它在 chrome 中运行良好，但在 safari mobile 中它变得不稳定。这是因为 safari mobile 顶部有导航栏，底部有另一个栏。我怎样才能为他们创建我的页面帐户？我一直在研究这个数周并尝试了每一个建议。我希望这里有人可以提供帮助。
你如何获得有和没有顶部和底部栏的高度？事实上，我真的不想要任何一个栏，但据我所知，除了用户将应用程序添加到他们的主屏幕之外，没有办法摆脱它们。如果我的用户还没有将它添加到他们的首页，我必须考虑条形的高度。我必须考虑它们的原因是我的页面有一个地图，它必须有一个固定的高度才能显示，它不能是 flex 的。我还在屏幕的顶部和底部都有按钮和用户控件，它们必须始终可见。
现在发生的事情是，有时内容会跳到导航栏下方，因此这些控件变得无法使用。
我想将页面高度设置为导航栏和状态栏之间的高度，如果它们正在显示，则为可用屏幕高度。正在寻找 css 或 javascript 解决方案。
有人可以帮忙吗？
使用 ios 11.2.6 进行测试。
这整件事绝对臭。我真的没有解决方案 - 不要认为有人会 - 但这是我所知道的。
CSS100vh是Safari 的视口可以达到的最大高度，即隐藏条。因此，如果条形图正在显示，则它太大了，并且事情可能会像您所看到的那样在条形下方。
CSSposition: fixed; top: 0; bottom: 0适合没有条的视口的当前大小，并且在条显示和隐藏时会发生变化，因此它更有用。但是你不能做所有的事情position: fixed。
window.innerHeight是一样的100vh所以那不是很好。
所以我知道从 JS 获得正确高度的唯一方法是制作一个position: fixed; top: 0; bottom: 0元素并测量它。然后你可以将该高度应用回其他元素，使它们适合屏幕，哦，但是当条形显示或隐藏时，高度会改变。哎呀。
有时最好将整个站点放在一个position:fixeddiv 中并overflow: hidden放在正文中，这样文档就不会滚动，条形也不会隐藏。
如果 body 是overflow: hidden，document.documentElement.clientHeight也会得到没有条形的高度。
Safari 总部的员工表示，这完全是设计使然，他们打算保持这种方式，Chrome 也将很快实施。真是一团糟。