iOS Safari 顶部和底部栏问题答案

【问题标题】：iOS Safari top and bottom bar issueiOS Safari 顶部和底部栏问题
【发布时间】：2017-10-15 04:56:46
【问题描述】：

我有一个包含三个固定部分的应用程序：

1) 标题 - 顶部

2) 主要内容-居中

3) 页脚 - 底部

主要内容使用overflow: auto 滚动，并且滚动条包含在它自己的尺寸内，而不是整个正文（这是我想要的）。然而，由于我的应用程序结构，滚动主要内容区域，iOS 上的 safari 不会隐藏 top address bar 和 bottom action bar。

我尝试了一些在博客文章和 stackoverflow 中找到的建议，但没有一个奏效。

任何遇到过类似问题并已解决的人，请多多指教 :)

以下是我尝试过的一些解决方案：

1) 在<body>上添加44px padding-bottom

2) 在<html> 上添加44px padding-bottom

3) 使用<meta name="apple-mobile-web-app-capable" content="yes">

4) JS sn-p 到 window.scrollTo(0, 1) 包裹在 setTimeout 中

以上方法都不适合我。

【问题讨论】：

【解决方案1】：

解决方法是将 html 高度设置为 100% 并在您网站的容器中滚动。这样做的缺点是，您始终可以看到原生栏。金融时报在所有设备上都这样做https://app.ft.com/，但你又在 iphone 5 上浪费了很多空间。

我们有另一种解决方案，可以为我们解决这个问题。由于本机栏仅在您向上滚动时出现。我们的导航也是如此。因此，如果您向下滚动，我们的菜单就会消失，如果您向上滚动，它就会出现。不会觉得很奇怪，也不会一直浪费空间。

【讨论】：

【解决方案2】：

我唯一的“解决方法”是使用 <meta name="apple-mobile-web-app-capable" content="yes"> 并让我的用户将我的网站添加到他们的主屏幕。

以这种方式调用站点会导致地址栏和操作栏完全隐藏。

【讨论】：