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

Question

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

作为解决方案，我希望始终强制显示底部导航栏。有没有办法做到这一点？ Jack Threads when viewed on mobile, and 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

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

Answer 2

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

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

似乎强制 Safari 中的 iOS 菜单总是出现。这样一来，单击按钮就可以正常工作，而不是打开 Safari 菜单。

不幸的是，您必须将此 CSS 与 JavaScript 浏览器检测配对，因为它会扰乱 iOS Chrome（也是 webkit）上的滚动。仅使用 CSS.

无法针对所有版本的 iOS Safari 仅

Answer 3

我正在粘贴 https://benfrain.com/the-ios-safari-menu-bar-is-hostile-to-web-apps-discuss/#comment-119538 in relation to how this is done for https://app.ft.com:

中提到的解决方案

The trick was adding height: 100% to html, and body, and anywhere in the css where it was using 100vh. No js browser detection needed as it causes no quirks in iOS Chrome, Safari fullscreen, or on Android browsers.

Answer 4

我相信高度：100% 是正确的选择。这似乎让 Safari 认为它还不如显示栏，因为没有内容试图在它后面，然后你在 100% 高度元素中添加滚动。

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

基本上应用下面的代码（例如在菜单打开时 class）。然后将菜单定位为 position: fixed 和 height: 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

打开link
向下滚动以隐藏 safari 底部导航
单击屏幕顶部附近的过滤器按钮

过滤器菜单将打开并强制打开 Safari 导航。

示例截图：

点击过滤器按钮之前：

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

Answer 5

我的回答是，不要尝试。

虽然 Jon Catmull 的回答在技术上确实强制浏览器保留底部工具栏。在试验中，我在该设置后经历了巨大的性能下降。

这方面的一个例子是 https://www.contiki.com/uk/en，工具栏永久显示，但性能损失在 Chrome 和 Safari 之间很明显。

在调查了其他网站之后，似乎全世界都刚刚接受了这种双击是不可避免的罪恶。

https://www.bbc.co.uk/news，突发新闻出现在浏览器底部，如果ui最小化，第一次点击returns底部工具栏，第二次点击进入文章。

amazon、ebay 等工具栏根据浏览器默认设置最小化。任何点击底部 ~30 像素的链接都会启用工具栏。

虽然这里其他答案有技术解决方案，但我认为双击比不上性能损失

Answer 6

这个问题有更好的解决方案（我认为）。我在页面加载时检查 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 (! documentBody.classList.contains("ios-toolbar-gone")) {
            documentBody.classList.add("ios-toolbar-gone");
          }
        } else {
          if (documentBody.classList.contains("ios-toolbar-gone")) {
            documentBody.classList.remove("ios-toolbar-gone");
          }
        }
      });
    </script>
  </body>
</html>

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

How might one force-show the mobile Safari bottom nav bar to show programmatically?

mobile-safari

ios