iPhone safari 底栏答案

【问题标题】：iPhone safari bottom bariPhone safari 底栏
【发布时间】：2018-01-15 00:00:47
【问题描述】：

我在使用 iPhone Safari 底栏（带有后退和前进按钮、新标签按钮和其他内容的那个）时遇到问题。在我的应用程序中，我在屏幕底部有一个绝对定位按钮，其宽度为 100%，高度与 safari 底栏几乎相同，我的按钮位于 safari 栏后面，而不是可见的。有什么方法可以知道 safari 底部栏是否存在，以便我知道何时移动我的内容，或者更好的是有没有办法完全删除它？

我试过了：

<meta name="apple-mobile-web-app-capable" content="yes">

还有最小的ui标签，但它不起作用。

【问题讨论】：

也许这会有所帮助？ stackoverflow.com/questions/9191240/…

标签： javascript html iphone safari

【解决方案1】：

我有同样的问题。我认为没有办法完全删除该栏。

虽然我考虑过听屏幕调整大小（因为这就是正在发生的事情）。所以我只有一个 JS/jQuery 函数（在我的例子中）将块的最小高度更改为屏幕高度。

$(window).resize(...); // For example

此外，在 css 中添加过渡会使事情看起来更好（尽管如果我没记错的话，移动 safari 中的过渡也很奇怪）

希望这能有所帮助。

如果您找到更聪明的方法，请告诉我！

【讨论】：

【解决方案2】：

也许这行得通

#root {
  position: fixed;
  height: 100%;
  top: 0;
  width: 100%;
}

.container {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.pane {
  flex: 1;
  height: 100%;
  width: 100%;
}

.bar {
  flex-shrink: 0;
  height: 50px;
}

<html>
  <body>
    <div id="#root">
      <div class="container">
        <div class="pane"></div>
        <div class="bar"></div>
      </div>
    </div>
  </body>
</html>

【讨论】：

“也许？”。仅发布 answers 作为答案。如果您不确定，请等到您获得足够的声望点来评论。