web-dev-qa-db-ja.com

下部のiPhone X Safariの固定ボタンは、応答するために2回クリックする必要があります

以下を使用して、Webページの下部に固定ボタンを配置しました。

.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>

fixed button #1

これはSafariおよびChrome=すべてのデバイスで動作します。ただし、iPhone Xでは、下にスクロールしてボタンをクリックすると、最初にバーが表示されます。

bar

そして、そのときだけ、固定ボタンがクリック可能になります。つまり、ユーザーは2回クリックする必要があるため、コンバージョン率が低下する可能性があります。私たちは不思議に思っています：

  1. IPhone Xで常にバーを表示する方法はありますか？
  2. 最初の試行でクリックを許可する方法はありますか？

UPDATE：ダニエルの 提案 を適用した後、視覚的にパディングがあるようです。私が追加したように：

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

with padding on iPhone X

それにもかかわらず、動作は継続し、2回のクリックが必要です。

htmlcsssafarimobile-safariiphone-x
11
Guy

このサイトによると 、追加のパディングにはenv(safe-area-inset-bottom)を使用します：

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

ダニエルA.ホワイトが示唆するように、...

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

正しいですが、彼のリンクに記載されている追加の手順では、これをサポートするために「viewport-fit = cover」も使用する必要があります。

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

最初にクリックしたときに表示されるバーは、Webサイトでは操作できないSafariネイティブ要素です。

可能な回避策は、ボタンのサイズを大きくして、ダニエルのヒントに加えて、（ほとんどの場合）最初の試行でクリックされるようにすることです。

0
Agent77326