当点击视口底部时，防止 Mobile Safari 显示工具栏
Posted
技术标签:
【中文标题】当点击视口底部时，防止 Mobile Safari 显示工具栏【英文标题】：Prevent Mobile Safari from presenting toolbar when bottom of viewport is tapped 【发布时间】：2014-03-10 01:39:45 【问题描述】：我们有一个在 ios 上的 Mobile Safari (MS) 中运行的简单移动应用程序。当用户向下滚动页面 n 个像素时，“顶部”按钮会从底部向上滑动。顶部按钮是固定位置。问题是，当您开始在 MS 中滚动时，导航和工具栏 UI 是隐藏的。当您点击“顶部”按钮时，它会显示底部工具栏，并且需要第二次点击才能点击“顶部”按钮。有什么方法可以禁用默认的“点击视口底部以显示工具栏”行为，以便我们的顶部按钮按预期工作（即单击一次而不是两次跳转到页面顶部？
【问题讨论】：
有一些方法可以在越狱设备上执行此操作。 Safari Bar Lock 调整的作者设法调配了控制工具栏的方法。 reddit.com/r/jailbreak/comments/1v6rfi/… 【参考方案1】：不，没有。您可以控制网页的内容，但不能控制 Safari 应用程序的行为。
【讨论】：
应该有办法告诉移动 Safari 不要这样做。这与禁用文本输入的自动更正没什么不同。 两者不同。自动更正是应用程序如何呈现元素的一个选项，在这种情况下，您可以控制很多。你想改变 safari 的 UI 的行为。我认为您尝试做的与尝试更改重新加载按钮的图标或地址栏的字体相同。 控制操作系统的行为（用户期望的，而不是您的网站希望强制执行的）将是非常糟糕的做法【参考方案2】：对于 iOS 7.1，您可以在标题中设置此项以最小化 UI：
<meta name="viewport" content="width=device-width, minimal-ui">
它是在 iOS 7.1 beta 2 中引入的。这个网站有助于我了解最小 ui 的工作原理：http://www.mobilexweb.com/blog/ios-7-1-safari-minimal-ui-bugs
【讨论】：
是的，但是 Apple 在 iOS 8 中删除了 minimual-ui :( ***.com/questions/24889100/…【参考方案3】：Mika 和 typeoneerror 是正确的，但有一个解决方法。
我找到的最佳解决方案（不需要minimal-ui）是强制iOS Safari 的底部导航始终保持打开/可见。这样，点击窗口底部永远不会打开底部导航，因为它总是打开。
为此，您只需应用一些 CSS 和带有 JS 的浏览器定位。详细步骤：
How might one force-show the mobile Safari bottom nav bar to show programmatically? Buttons aligned to bottom of page conflict with mobile Safari's menu bar【讨论】：
【参考方案4】：这里的简单解决方案是在最底部的 div 上添加大约 50px padding-bottom。 Safari 似乎认为您正在尝试访问底部导航栏，除非您在底部区域上方单击。底部有额外的填充，用户会在页面上点击更高的位置（并非总是如此，但通常如此）。
【讨论】：
这怎么能不改变视觉外观（通过在 div 下方产生间隙或增加 div 的高度）？ 遇到了同样的问题，这个解决方法有效。【参考方案5】：我是这样处理的。使用我自己的position:fixed;bottom:0 工具栏，我在 safari 工具栏被隐藏后不久向它添加 44px 偏移量（带有半透明缓冲区）（因为这是靠近底部的点击将显示工具栏的场景再次）。
var min_inner_height = false;
var max_inner_height = false;
var passiveIfSupported = false;
try
window.addEventListener("test", null, Object.defineProperty(, "passive",
get: function ()
passiveIfSupported =
passive: true
;
));
catch (err)
document.addEventListener('scroll', function (e)
var win_inner_h = window.innerHeight;
if (/iPad|iPhone|iPod/.test(navigator.userAgent))
if (min_inner_height === false || win_inner_h < min_inner_height)
min_inner_height = win_inner_h;
if ((max_inner_height === false || win_inner_h > max_inner_height) && win_inner_h > min_inner_height)
max_inner_height = win_inner_h;
if (max_inner_height !== false && max_inner_height == win_inner_h)
addElementClass(document.body, 'safari-toolbars-hidden');
else
removeElementClass(document.body, 'safari-toolbars-hidden');
, passiveIfSupported);
这基本上将.safari-toolbars-hidden 类添加到<body> 中，因为用户向下滚动页面时它们会消失。
此时，我将自己的工具栏向上移动：
.my-bottom-toolbar
bottom: 0px;
position: fixed;
@supports (-webkit-overflow-scrolling: touch)
/* CSS specific to iOS devices */
.my-bottom-toolbar
box-shadow: 0 44px 0 rgba(255, 255, 255, 0.8);
transition: bottom 0.15s ease-in-out;
.safari-toolbars-hidden .my-bottom-toolbar
bottom: 44px;
希望这对某人有所帮助！
除了进一步偏移 44 像素外，您还可以添加额外 44 像素的底部填充，如果这对您的情况更有效。
【讨论】：
这怎么能不改变视觉外观（通过在元素下方产生间隙或增加元素的高度）？ 是的，它会改变外观，因为始终为 Safari 工具栏的出现位置保留 44 像素的空间。因此，我通过让他们瞄准该空白区域上方来节省用户的点击，以防在下方瞄准只会显示工具栏。当工具栏在那里时，多余的空间就会消失。 在 iOS 14 上运行良好！唯一的事情是我会使用“ document.body.classList.add("safari-toolbars-hidden");"和 .remove() 而不是您的自定义方法。另外，我想知道 android/Chrome 是否隐藏/显示底栏以及如何处理它？ 【参考方案6】：对我来说最好的解决方案来自this article。
我的解决方案是使用 react，但只是从文章解决方案中翻译而来。
import useWindowHeight from '@react-hook/window-size/throttled';
//... inside your component
const height = useWindowHeight();
React.useEffect(() =>
const vh = height * 0.01;
document.documentElement.style.setProperty('--vh', `$vhpx`);
, [height]);
body
/* other styles */
height: 100vh;
height: calc(var(--vh, 1vh) * 100);
现在当 innerHeight 改变时，钩子被触发并调整高度变量。当 safari url 栏和底部导航隐藏时，窗口的 innerHeight 会发生变化，因此我的应用适合这两种情况。
【讨论】：
以上是关于当点击视口底部时，防止 Mobile Safari 显示工具栏的主要内容，如果未能解决你的问题，请参考以下文章
从 iPad 上的列表中卸载页面时，如何防止 mobile-safari 跳转？
当输入集中在移动 safari 上时，页面底部出现不需要的填充
当用户“点击”时，在 Mobile Safari 中添加 :hover 效果
iOS mobile safari - 底部栏覆盖了我的页脚