当点击视口底部时阻止移动 Safari 显示工具栏
[英]Prevent Mobile Safari from presenting toolbar when bottom of viewport is tapped
问题描述
We have a simple mobile app running in Mobile Safari (MS) on iOS.
我们有一个在 iOS 上的 Mobile Safari (MS) 中运行的简单移动应用程序。 When the user scrolls down the page n pixels, a "top" button slides up from the bottom.当用户向下滚动页面n像素时，“顶部”按钮从底部向上滑动。 The top button is fixed position.顶部按钮是固定位置。 Problem is, when you start scrolling in MS, the navigation and toolbar UI is hidden.问题是，当您在 MS 中开始滚动时，导航和工具栏 UI 被隐藏。 When you tap the "top" button, it reveals the bottom toolbar and a second tap is required to tap the "top" button.当您点击“顶部”按钮时，它会显示底部工具栏，需要再次点击才能点击“顶部”按钮。 Is there any way to disable the default "tap on the bottom part of the viewport to reveal the toolbar" behavior so our top button works as expected (ie jumps to the top of the page with one click, not two?有什么方法可以禁用默认的“点击视口底部以显示工具栏”行为，以便我们的顶部按钮按预期工作（即单击一次而不是两次跳转到页面顶部？
6 个解决方案
解决方案1
18 已采纳 2014-02-12 00:18:06
No there is not.不，那里没有。 You can control the content of your webpage but not the behavior of the safari app.您可以控制网页的内容，但不能控制 safari 应用程序的行为。
解决方案2
10 2016-10-03 14:25:55
The simple solution here is to add about 50px padding-bottom on your bottom most div.这里的简单解决方案是在最底部的 div 上添加大约 50px 的 padding-bottom。 Safari seems to think that you are trying to access the bottom navigation bar, unless you click well above the bottom area. Safari 似乎认为您正在尝试访问底部导航栏，除非您在底部区域上方单击。 With extra padding at bottom, the user will click much higher on the page (not always, but in general).底部有额外的填充，用户将在页面上点击更高的位置（并非总是如此，但通常如此）。
解决方案3
6 2016-01-06 22:37:31
Mika and typeoneerror are correct, but there is a workaround. Mika 和 typeoneerror 是正确的，但有一个解决方法。
The best workaround solution I found (that doesn't require minimal-ui ) is to force the bottom navigation of iOS Safari to always stay open/visible.我发现的最佳解决方案（不需要minimal-ui ）是强制 iOS Safari 的底部导航始终保持打开/可见。 That way, clicks to the bottom of the window never open the bottom navigation since it's always open.这样，单击窗口底部永远不会打开底部导航，因为它始终处于打开状态。
To do that, you just need to apply some CSS and browser targeting with JS.为此，您只需要使用 JS 应用一些 CSS 和浏览器定位。 Detailed steps on how:详细步骤：
解决方案4
5 2014-04-17 00:04:05
For iOS 7.1, you can set this in your header to minimize the UI:对于 iOS 7.1，您可以在标题中设置此项以最小化 UI：
<meta name="viewport" content="width=device-width, minimal-ui">
It was introduced in iOS 7.1 beta 2. This site was instrumental in helping me understand how minimal-ui works: http://www.mobilexweb.com/blog/ios-7-1-safari-minimal-ui-bugs它是在 iOS 7.1 beta 2 中引入的。这个网站有助于我理解 minimum-ui 的工作原理： http : //www.mobilexweb.com/blog/ios-7-1-safari-minimal-ui-bugs
解决方案5
4 2019-01-31 17:02:32
Here's how I'm dealing with this.这就是我如何处理这个问题。 With a position:fixed;bottom:0 toolbar of my own, I'm adding 44px offset to it (with a semi-transparent buffer zone) shortly after the safari toolbar is hidden (as this is the scenario where a tap near the bottom will reveal the toolbar again).使用我自己的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);
This basically adds the .safari-toolbars-hidden class to the <body> sometime around when they disappear due to the user scrolling down the page.这基本上将.safari-toolbars-hidden类添加到<body>某个时候，当它们由于用户向下滚动页面而消失时。
At this point, I move my own toolbar up the page:此时，我将自己的工具栏向上移动到页面上：
.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;
}
}
Hope this helps someone!希望这可以帮助某人！
Instead of offsetting by a further 44px, you could also add an extra 44px of bottom padding if that works better for your case.如果这更适合您的情况，您还可以添加额外的 44px 底部填充，而不是进一步偏移 44px。
解决方案6
0 2021-02-24 23:18:17
The best solution for me comes from this article .对我来说最好的解决方案来自 这篇文章。
My solution is with react but simply translated from the articles solution.我的解决方案是反应，但只是从文章解决方案中翻译出来的。
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);
}
Now when the innerHeight changes the hook is fired and the height variable is adjusted.现在，当innerHeight 改变时，钩子被触发并调整高度变量。 The window's innerHeight changes when the safari url bar and bottom navigation are hidden so my app fits just right for both situations.当 safari url 栏和底部导航被隐藏时，窗口的 innerHeight 会发生变化，因此我的应用程序正好适合这两种情况。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.