iOS ui隐藏页面的底部。 当隐藏和显示iOS底部菜单时，如何使整个页面具有响应性并且底部始终可见？

Question

jsfiddle中有一个示例 。 “ bottom_menu”类应显示在页面底部。 “ content”类的文本应显示在“ bottom_menu” div的中心。 但是此文本应该比电话屏幕的中心略高，因为整个电话屏幕的高度等于“ bottom_menu” div高度+“ bottom_menu” div高度。

问题是，当我在iPhone上打开此页面时，iOS本机ui会隐藏“ bottom_menu” div，直到我向下滚动为止。

当显示ios原生bototm菜单时，我需要使“内容” div降低一些高度，以使“ bottom_menu”可见。

我试图通过设置“ bottom_menu”位置来解决此问题： 和bottop：0px； 但是在这种情况下，“ contant” div文本将显示在电话屏幕中心（而不是content_height / 2-bottom_menu_height）。

当隐藏和显示ios本机底部菜单时，如何通过缩放“内容” div使该“ bottom_menu”始终可见？

的HTML是：

<div class="wrapper">
   <p>It's scrolleble content</p>
   <div class="bottom_menu">Content on the bottom of the page</div> 
</div>

CSS是：

.wrapper {
  background: green;
  height: 200vh;
}

.bottom_menu {
  background: rebeccapurple;
  height: 44px;
  position: fixed;
  bottom: 0px;
}

p {
  background: red;
  height: 100vh;
}

Answer 1

一种方法是检测浏览器并在.bottom_menu中更改您的bottom属性，查看这些链接。

如何检测Safari，Chrome，IE，Firefox和Opera浏览器？

如何使用JavaScript检测我的浏览器版本和操作系统？