it-swarm.com.de

die feste Taste des iPhone X Safari benötigt zwei Klicks

Wir haben eine feste Schaltfläche am unteren Rand der Webseite eingefügt:

.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

Es funktioniert mit Safari und Chrome auf allen Geräten. Wenn Sie jedoch auf dem iPhone X nach unten scrollen und versuchen, auf die Schaltfläche zu klicken, wird zuerst die Leiste angezeigt:

 bar

und nur dann ist der feste Knopf anklickbar. Dies bedeutet, dass Benutzer zweimal klicken müssen, wodurch möglicherweise die Conversion-Raten reduziert werden. Wir wundern uns:

  1. Gibt es eine Möglichkeit, die Leiste immer auf dem iPhone X anzuzeigen?
  2. Gibt es eine Möglichkeit, einen Klick beim ersten Versuch zuzulassen?

UPDATE: Nach der visuellen Anwendung von Daniel's Suggestion scheint eine Auffüllung zu bestehen. Wie ich hinzugefügt habe:

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

 with padding on iPhone X

Trotzdem setzt sich das Verhalten fort und es sind zwei Klicks erforderlich.

8
Guy

Gemäß dieser Site verwenden Sie env(safe-area-inset-bottom) für zusätzliche Auffüllung:

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

Die Leiste, die beim ersten Klick angezeigt wird, ist ein natives Element von Safari, das von einer Website nicht bearbeitet werden kann.

Eine mögliche Problemumgehung besteht darin, die Schaltflächengröße zu vergrößern, sodass sie beim ersten Versuch (meistens) zusätzlich zu Daniels Tipp angeklickt wird.

0
Agent77326

Wie Daniel A. White vorschlägt, mit ...

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

ist richtig, jedoch erfordert ein zusätzlicher Schritt in seinem Link, dass Sie auch 'viewport-fit = cover' verwenden, um dies zu unterstützen. 

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