iPhone X Safari 底部固定按钮需要点击两次才能响应。

Question

我们使用以下代码在网页底部放置了一个固定的按钮：

.CTA-container {
    position:fixed;
    bottom:0;
    left:0;
    right:0;
    height:50px;
    background-color:#333;
  }
  
 a {
    font-size:20px;
    color:white;
    font-weight: bold;
    text-decoration: none;
    font-family: 'ProximaNova', tahoma, sans-serif;
    display: block;
    height:50px;
    line-height: 50px;
    text-align: center;
  }

<div class="CTA-container">
    <a href="https://www.google.com">
        Download Our App <span></span>
    </a>
</div>

这个按钮在所有设备上都可以使用Safari和Chrome。但是，在iPhone X上，当您向下滚动并尝试单击按钮时，它首先显示以下栏：

只有在此之后，固定的按钮才可点击。这意味着用户需要点击两次，可能会降低转化率。我们想知道：

1. 是否有办法始终在iPhone X上显示该栏？
2. 是否有办法第一次尝试即可进行点击操作？

更新: 应用了Daniel的建议后，可视上似乎有一个填充。因此，我已经添加了：

   .CTA-container {
        margin-bottom: env(safe-area-inset-bottom);
    }

尽管如此，这种行为仍然存在，需要点击两次。

- Guy

---

请问您能否创建一个堆栈片段以重现问题？ - Alon Eitan

我知道，但像许多其他人一样，我的公司代理服务器正在禁止图像网站。我并不是命令他这么做，只是因为我知道如何使用 flexboxes，所以才会问一下。就这样 :) - user4676340

如何在程序中强制显示移动 Safari 底部导航栏？ - Guy

https://www.eventbrite.com/engineering/mobile-safari-why/ - Philipp Mochine

Answer 1

根据这个网站，使用env(safe-area-inset-bottom)来增加填充：

.CTA-container {
  padding-bottom: env(safe-area-inset-bottom);
}

- Daniel A. White

---

太好了！看起来这可能是正确的方向，现在更新了问题，因为我们仍然遇到了一次点击显示栏，第二次点击才能点击按钮的行为。 - Guy

我刚刚将底部填充的大小增加了两倍，现在只需要单击一次。缺点是按钮区域底部有一些额外的空间，但我认为我们可以接受这个问题： .CTA-container { padding-bottom: calc(2 * env(safe-area-inset-bottom)); } - Jan Zikmund

我也注意到 env(safe-area-inset-bottom) 需要加倍才能解决问题。不幸的是，这会导致视口底部太多的空间，无法使用。 - Thomas Higginbotham

Answer 2

As Daniel A. White suggests, using...

.CTA-container {
    padding-bottom: env(safe-area-inset-bottom);
}

"最初的回答"已经正确，但是他链接中提到的一个额外步骤需要你同时使用 'viewport-fit=cover' 才能支持此功能。"

<meta name="viewport" content="width=device-width, viewport-fit=cover">

- Lex

Answer 3

当您进行第一次点击时出现的工具栏是Safari本地元素，无法由网站操作。可能的解决方法是将按钮大小增加到较大的尺寸，以便第一次尝试（大多数情况下）单击，除了Daniel的提示。

- Yasamato