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 上，向下滚动并尝试单击按钮后，它首先显示栏：

然后固定按钮才可以点击。这意味着用户需要点击两次，因此可能会降低转化率。我们在想：

有没有办法始终在 iPhone X 上显示条形图？
有没有办法允许第一次尝试点击？

更新： 在视觉上应用 Daniel 的后，似乎有一个填充。正如我添加的：

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

然而，该行为仍在继续，需要单击两次。

Answer 1

According to this site，使用 env(safe-area-inset-bottom) 进行额外填充：

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

Answer 2

第一次点击时出现的栏是 Safari 原生元素，无法由网站操作。

可能的解决方法是将您的按钮大小增加到更大的大小，以便在第一次尝试（大部分）时点击它，除了 Daniel 的 tipp。

Answer 3

正如 Daniel A. White 建议的那样，使用...

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

是正确的，但是他的 link 中提到的附加步骤要求您还使用 'viewport-fit=cover' 来支持这一点。

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

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

iPhone X Safari fixed button on bottom needs two clicks to respond

html

css

safari

mobile-safari

iphone-x