Question

我们在iOS上的Mobile Safari（MS）中运行了一个简单的移动应用程序。当用户向下滚动页面 n 像素时，“顶部”按钮从底部向上滑动。顶部按钮是固定位置。问题是，当您开始在MS中滚动时，导航和工具栏UI将被隐藏。当您点击“顶部”按钮时，它会显示底部工具栏，点击“顶部”按钮需要第二次点击。有没有办法禁用默认的“点击视口底部以显示工具栏”的行为，所以我们的顶部按钮按预期工作（即只需点击一下，而不是两个跳转到页面顶部？

Answer 1

不，没有。您可以控制网页的内容，但不能控制Safari应用的行为。

Answer 2

对于iOS 7.1，您可以在标题中设置此项以最小化UI：

<meta name="viewport" content="width=device-width, minimal-ui">

它是在iOS 7.1 beta 2中引入的。该网站有助于我了解minimal-ui的工作原理：http://www.mobilexweb.com/blog/ios-7-1-safari-minimal-ui-bugs

Answer 3

这里的简单解决方案是在最底部的div上添加大约50px的padding-bottom。 Safari似乎认为您正在尝试访问底部导航栏，除非您在底部区域上方点击。如果底部有额外的填充，用户将在页面上点击更高的位置（并非总是如此，但一般情况下）。

Answer 4

Mika和typeoneerror是正确的，但有一种解决方法。

我找到的最佳解决方案（不需要minimal-ui）是强制iOS Safari的底部导航始终保持打开/可见。这样，点击窗口底部就不会打开底部导航，因为总是打开。

要做到这一点，您只需要使用JS应用一些CSS和浏览器定位。详细步骤如何：

Answer 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 { position: fixed; bottom: 0px; }

@supports (-webkit-overflow-scrolling: touch) {
    /* CSS specific to iOS devices */
    .my-bottom-toolbar { transition: bottom 0.15s ease-in-out; box-shadow: 0 44px 0 rgba(255, 255, 255, 0.8); }
    .safari-toolbars-hidden .my-bottom-toolbar { bottom: 44px;  }
}

希望这对某人有帮助！如果您的情况更好，您也可以添加额外的44px底部填充，而不是再偏移44px。

Answer 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', `${vh}px`);
}, [height]);

body {
  /* other styles */
  height: 100vh;
  height: calc(var(--vh, 1vh) * 100);
}

现在当innerHeight改变时，钩子被触发并且高度变量被调整。当 safari url 栏和底部导航被隐藏时，窗口的 innerHeight 会发生变化，因此我的应用程序正好适合这两种情况。

在轻触视口底部时，阻止Mobile Safari显示工具栏

6 个答案: