如何强制显示移动 Safari 底部导航栏以编程方式显示？
Posted
技术标签:
【中文标题】如何强制显示移动 Safari 底部导航栏以编程方式显示？【英文标题】：How might one force-show the mobile Safari bottom nav bar to show programmatically? 【发布时间】：2016-02-12 04:36:26 【问题描述】：我的网页底部有一个用于 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
【问题讨论】：
【参考方案1】：这个问题有更好的解决方案（我认为）。我在页面加载时检查 Windows 的 innerHeight。滚动时，如果高度至少增加 50 像素，我可以将按钮升高 25 像素。 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>
【讨论】：
var documentBody = document.body; 行未使用 :-)
我看到这个解决方案的主要问题是事件监听器的必要性，这是我在纯 CSS 解决方案中避免的。这个解决方案确实有效（并且是我研究过的），但我的目标是获得最高效的解决方案。【参考方案2】：
我的回答是，不要尝试。
虽然 Jon Catmull 的回答在技术上确实会强制浏览器保留底部工具栏。在试验中，我在设置之后经历了巨大的性能下降。
这方面的一个例子是https://www.contiki.com/uk/en，工具栏永久显示，但 Chrome 和 Safari 之间的性能损失很明显。
在调查了其他网站之后，似乎全世界都刚刚接受了这种双击是必要的邪恶。
https://www.bbc.co.uk/news，浏览器底部出现突发新闻，如果ui最小化，第一次点击返回底部工具栏，第二次点击进入文章。
amazon、ebay 等工具栏根据浏览器默认设置最小化。对底部约 30 像素中的链接的任何点击都会启用工具栏。
虽然这里的其他答案中有技术解决方案，但我不认为双击与性能损失相比
【讨论】：
看起来 contiki 现在也放弃了这种方法，这很遗憾，因为它是一个非常有用的例子【参考方案3】：我相信高度：100% 是要走的路。看起来这似乎让 Safari 认为它还不如显示栏，因为没有内容试图在它后面，然后你在 100% 高度元素中添加滚动。
我的问题有所不同，因为我的按钮处于固定位置模式，我不希望 Safari 底部导航一直显示，但是当我的移动过滤器导航打开时，它需要显示。
基本上应用下面的代码（例如在菜单打开类上）。然后将菜单定位为 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
-
打开链接
向下滚动以隐藏 safari 底部导航
点击屏幕顶部附近的过滤器按钮
过滤器菜单将打开并强制打开 safari 导航。
示例截图：
在点击过滤器按钮之前：
然后当用js打开导航时，我应用上面的样式并强制打开导航
【讨论】：
这是我尝试过的唯一有效的解决方案。可能是因为不再使用-webkit-overflow-scrolling（作为大多数其他解决方案的一部分提出）。【参考方案4】：
我正在粘贴https://benfrain.com/the-ios-safari-menu-bar-is-hostile-to-web-apps-discuss/#comment-119538 中提到的解决方案，该解决方案涉及如何为https://app.ft.com 完成此操作：
诀窍是将 height: 100% 添加到 html、body 和任何地方 使用 100vh 的 CSS。不需要 js 浏览器检测，因为它 在 iOS Chrome、Safari 全屏或 android 上不会导致异常 浏览器。
【讨论】：
这就足够了：body position: fixed; overflow: hidden; 【参考方案5】：
我想我可能已经找到了答案。将您的内容设置为具有以下样式：
height: 100%（允许内容填充视口并超出
底部）
overflow-y: scroll（允许您在视口下方滚动；
默认值可见）
-webkit-overflow-scrolling: touch（平滑任何滚动行为）
似乎强制 Safari 中的 iOS 菜单始终出现。那样的话，按钮点击实际上会起作用，而不是打开 Safari 菜单。
不幸的是，您必须将此 CSS 与 javascript 浏览器检测配对，因为它会扰乱 iOS Chrome（也包括 webkit）上的滚动。仅使用 CSS 无法仅针对所有版本的 iOS Safari。
【讨论】：
非常有前途！不幸的是，这似乎使scrollTop 总是报告 0，而window.scrollTo(0,0) 不再起作用。任何解决方法？ （我在 iOS 11.2 上注意到了这一点。）
很遗憾，我很久没有看这个问题了，但我肯定记得那个问题。你想使用哪个元素的 scrollTop？【参考方案6】：
我也有同样的问题。我们正在努力在我们的网站上实现底部导航，而 safari 给我们带来了问题，因为点击屏幕底部会打开 Safari 的底部导航，迫使用户点击两次。我们提出的最佳解决方案是在导航下方添加一个 44 像素的空间，这看起来非常糟糕。如果我可以强制 safari 的导航保持打开状态，这样它就可以填充那个空间，而不是一个基本上无用的空块。
【讨论】：
以上是关于如何强制显示移动 Safari 底部导航栏以编程方式显示？的主要内容，如果未能解决你的问题，请参考以下文章
当点击视口底部时，防止 Mobile Safari 显示工具栏
Material UI：底部导航与 iOS 上的 Progressive Web App (PWA) Safari 对齐