不要在 Safari for ios 中隐藏操作栏？

【问题标题】：Don't hide action bar in Safari for ios?不要在 Safari for ios 中隐藏操作栏？
【发布时间】：2018-07-17 21:08:39
【问题描述】：

我的菜单位于网站的固定底部，用于移动设备，以便您的拇指更容易访问。

但是在 Safari 中遇到了问题。因为当您向下滚动时，该栏会消失。然后，当您按下我网站上的“菜单”按钮时，除了 Safari 操作栏从底部向上滑动并将我的菜单向上移动并远离您的拇指位置之外，什么也没有发生。

有什么方法可以让操作栏保持打开或隐藏？或者有什么其他方法可以解决这个问题？

【问题讨论】：

标签： ios mobile responsive-design safari

【解决方案1】：

给定这样的布局：

        <div className="App">
            <header></header>
            <main></main>
            <footer></footer>
        </div>

您可以使用此 CSS 强制底部导航栏保持打开状态。这应该会在可怕的 Safari Mobile 死区之外提供一个不错的页脚。

html, body {
    height: 100%;
}
body {position: fixed;}
.App {
    height: 100%;
    display: flex;
    flex-direction: column;
}
header {
    flex: 0 0 5rem;
    background: #333;
    color: white;
}
main {
    width: 100vw;
    flex: 1 1 auto;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
}
footer {
    flex: 0 0 auto;
    background: #333;
    color: white;
}

我还建议使用 body-scroll-lock npm 模块使您的 main 标签可滚动并关闭正文滚动。 https://www.npmjs.com/package/body-scroll-lock

【讨论】：