Question

我的网页底部有一个固定的CTA按钮（号召性用语）。在较新版本的iOS上向下滚动页面，移动版Safari隐藏了底部导航栏（带有后退，前进，共享，书签和新标签按钮）。如果您单击CTA按钮，而不是执行该操作，移动Safari将显示底部导航栏。

作为一种解决方案，我一直希望强制显示底部导航栏。有办法做到这一点吗？在移动设备上查看时Jack Threads以及Thread Flip的移动网站都可以在查看单个项目时将其关闭。

到目前为止，我无法对此进行逆向工程。有谁知道力量表演是如何完成的？

相关： Buttons aligned to bottom of page conflict with mobile Safari's menu bar和 Prevent Mobile Safari from presenting toolbar when bottom of viewport is tapped

Answer 1

我想我可能找到了答案。将内容设置为具有以下样式：

height: 100%（允许内容填充视口并超越底部）
overflow-y: scroll（允许您在视口下方滚动; 默认值是可见的）
-webkit-overflow-scrolling: touch（以平滑任何滚动行为）

似乎强制Safari中的iOS菜单始终显示。这样，按钮点击实际上可以工作，而不是打开Safari菜单。

不幸的是，你必须将这个CSS与JavaScript浏览器检测配对，因为它会混淆iOS Chrome（也是webkit）上的滚动。没有办法仅使用CSS定位所有版本的iOS Safari 。

Answer 2

我要粘贴https://benfrain.com/the-ios-safari-menu-bar-is-hostile-to-web-apps-discuss/#comment-119538中提到的关于https://app.ft.com的解决方案的解决方案：

诀窍是增加高度：html，body和任何位置的高度均为100％使用100vh的CSS。不需要JS浏览器检测在iOS Chrome，Safari全屏或Android上不会导致古怪浏览器。

Answer 3

我有同样的问题。我们正在努力在我们的网站上实施底部导航，并且safari给我们带来了问题，因为点击屏幕底部会打开Safari的底部导航，迫使用户点击两次。我们提出的最佳解决方案是在导航下方添加44px空间，看起来非常糟糕。如果我可以强迫safari的导航保持打开状态，那么它可以填充那个空间而不是一个基本无用的空块。

Answer 4

我相信身高：100％是正确的选择。似乎这似乎使Safari认为它可能会显示该条，因为没有内容尝试在其后移动，然后在100％height元素内添加滚动条。

我的问题有所不同，因为我的按钮处于固定位置模式，我不希望Safari底部导航栏始终显示，但是当我打开移动过滤器导航栏时，它需要显示。

本质上应用以下代码（例如，在菜单打开类中）。然后将菜单定位为位置：固定和高度：100％

html.menu-open {
    height: 100%;

    body {
        position: fixed;
        width: 100%;
        top: 0px;
        overflow: hidden;
    }
}

.menu {
    position: fixed;
    height: 100%;
    width: 100%;
    overflow: auto;
}

此处的工作示例：

https://www.electronicsadvisor.com/products/51/washing-machines-tumble-dryers

打开链接
向下滚动以隐藏野生动物园底导航
点击屏幕顶部附近的过滤器按钮

“过滤器”菜单将打开，并强制打开safari导航。

示例屏幕截图：

在单击过滤器按钮之前：

然后在用js打开导航时，我在上面应用了样式，并且导航被强制打开

Answer 5

有一个更好的解决这个问题的方法（我认为）。我检查页面加载时Windows的innerHeight。在滚动时，如果高度至少增加50px，我可以将按钮提高25px。 25px似乎是最佳选择，您需要触摸按钮的最底部以显示工具栏。这是一个现场演示和代码：https://visztpeter.me/demos/ios.html

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Fix tap for button at the bottom in iOS Safari when the toolbar is gone</title>
    <style type="text/css">
      div {
        margin:20px;
        height:2000px;
        background:gray
      }

      button {
        position:fixed;
        bottom:0;
        left:0;
        right:0;
        height:48px;
        background:blue;
        border:none;
        transition: all ease 0.2s;
      }

      .ios-toolbar-gone button {
        transform: translateY(-25px);
      }
    </style>
  </head>
  <body>
    <div></div>
    <button></button>
    <script>
      var baseWindowHeight = Math.max(window.innerHeight);
      var classAdded = false;
      var documentBody = document.body;
      document.addEventListener('scroll', function(e){
        var newWindowHeight = Math.max(window.innerHeight);
        if(newWindowHeight-50 > baseWindowHeight) {
          if (!document.body.classList.contains("ios-toolbar-gone")) {
            document.body.classList.add("ios-toolbar-gone");
          }
        } else {
          if (document.body.classList.contains("ios-toolbar-gone")) {
            document.body.classList.remove("ios-toolbar-gone");
          }
        }
      });
    </script>
  </body>
</html>

Answer 6

我的答案是，不要尝试。

Jon Catmull的回答确实会强制浏览器保留底部工具栏。在试用版中，该设置使我的性能大幅下降。

例如https://www.contiki.com/uk/en，该工具栏会永久显示，但在Chrome和Safari之间会明显降低性能。

在调查了其他网站之后，似乎世界已经接受了这种双击是必然的恶行。

https://www.bbc.co.uk/news，突发新闻显示在浏览器的底部，如果将ui最小化，则第一次单击将返回底部的工具栏，第二次单击将转到该文章。

amazon，ebay等，根据浏览器默认值，工具栏最小化。单击底部约30像素的链接将启用工具栏。

尽管这里还有其他答案中的技术解决方案，但我认为双击与性能损失不一样

如何强制显示移动Safari底部导航栏以编程方式显示？

6 个答案: