我们有一个在 iOS 上的 Mobile Safari (MS) 中运行的简单移动应用程序。当用户向下滚动页面 n 个像素时，“顶部”按钮会从底部向上滑动。顶部按钮是固定位置。问题是，当您开始在 MS 中滚动时，导航和工具栏 UI 是隐藏的。当您点击“顶部”按钮时，它会显示底部工具栏，并且需要第二次点击才能点击“顶部”按钮。有什么方法可以禁用默认的“点击视口底部以显示工具栏”行为，以便我们的顶部按钮按预期工作（即单击一次而不是两次跳转到页面顶部？
【问题讨论】：
标签： ios iphone mobile-safari
不，没有。您可以控制网页的内容，但不能控制 Safari 应用程序的行为。
【讨论】：
对于 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
【讨论】：
Mika 和 typeoneerror 是正确的，但有一个解决方法。
我找到的最佳解决方案（不需要minimal-ui）是强制iOS Safari 的底部导航始终保持打开/可见。这样，点击窗口底部永远不会打开底部导航，因为它总是打开。
为此，您只需应用一些 CSS 和带有 JS 的浏览器定位。详细步骤：
【讨论】：
这里的简单解决方案是在最底部的 div 上添加大约 50px padding-bottom。 Safari 似乎认为您正在尝试访问底部导航栏，除非您在底部区域上方单击。底部有额外的填充，用户会在页面上点击更高的位置（并非总是如此，但通常如此）。
【讨论】：
我是这样处理的。使用我自己的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 像素的底部填充，如果这对您的情况更有效。
【讨论】：
对我来说最好的解决方案来自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', `${vh}px`);
}, [height]);
body {
/* other styles */
height: 100vh;
height: calc(var(--vh, 1vh) * 100);
}
现在当 innerHeight 改变时，钩子被触发并调整高度变量。当 safari url 栏和底部导航隐藏时，窗口的 innerHeight 会发生变化，因此我的应用适合这两种情况。
【讨论】：