即使在 Safari 中，如何获得整页 Web 应用程序？
how to get a full page web app even in safari?
我正在构建一个全页面网络应用程序，它在 chrome 中运行良好，但在 Safari 移动版中它变得不稳定。这是因为 safari mobile 的导航栏在顶部，另一个栏在底部。我怎样才能让我的页面考虑到他们？我已经对此进行了数周的研究，并尝试了所有建议。我希望这里有人可以提供帮助。
如何获得有和没有顶部和底部条的高度？事实上，我真的不想要任何一个栏，但据我所知，除了用户将应用程序添加到他们的主屏幕之外，没有办法摆脱它们。如果我的用户还没有将它添加到他们的首页，我必须考虑栏的高度。我必须考虑到它们的原因是我的页面有一个地图，它必须有一个固定的高度才能显示，它不能是 flex。我在屏幕的顶部和底部也有按钮和用户控件，它们必须始终可见。
现在发生的情况是，有时内容会跳到导航栏下方，因此这些控件变得不可用。
我想将页面高度设置为导航栏和状态栏之间的高度，如果它们正在显示，则为可用屏幕高度。寻找 css 或 javascript 解决方案。
有人可以帮忙吗？
使用 ios 11.2.6.
进行测试
这整件事绝对臭不可闻。我真的没有解决方案 - 不要认为任何人都有 - 但这是我所知道的。
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 也将很快实施。真是一团糟
我正在构建一个全页面网络应用程序，它在 chrome 中运行良好，但在 Safari 移动版中它变得不稳定。这是因为 safari mobile 的导航栏在顶部，另一个栏在底部。我怎样才能让我的页面考虑到他们？我已经对此进行了数周的研究，并尝试了所有建议。我希望这里有人可以提供帮助。
如何获得有和没有顶部和底部条的高度？事实上，我真的不想要任何一个栏，但据我所知，除了用户将应用程序添加到他们的主屏幕之外，没有办法摆脱它们。如果我的用户还没有将它添加到他们的首页，我必须考虑栏的高度。我必须考虑到它们的原因是我的页面有一个地图，它必须有一个固定的高度才能显示，它不能是 flex。我在屏幕的顶部和底部也有按钮和用户控件，它们必须始终可见。
现在发生的情况是，有时内容会跳到导航栏下方，因此这些控件变得不可用。
我想将页面高度设置为导航栏和状态栏之间的高度，如果它们正在显示，则为可用屏幕高度。寻找 css 或 javascript 解决方案。
有人可以帮忙吗？
使用 ios 11.2.6.
进行测试这整件事绝对臭不可闻。我真的没有解决方案 - 不要认为任何人都有 - 但这是我所知道的。
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 也将很快实施。真是一团糟