是否在Safari for iOS中隐藏操作栏？

Question

我在移动设备网站的底部固定了菜单，以使您的拇指更容易使用。

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

有什么办法可以让操作栏保持向上或隐藏吗？或其他解决此问题的方法？

Answer 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