web-dev-qa-db-fra.com

le bouton fixe de l'iPhone X Safari en bas nécessite deux clics pour répondre.

Nous avons placé un bouton fixe au bas de la page Web en utilisant:

.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

Cela fonctionne avec Safari et Chrome sur tous les appareils. Cependant, sur iPhone X, après avoir fait défiler l'écran vers le bas et essayé de cliquer sur le bouton, il affiche d'abord la barre:

bar

et alors seulement le bouton fixe est cliquable. Cela signifie que les utilisateurs doivent cliquer deux fois pour réduire les taux de conversion. Nous nous demandons:

  1. Est-il possible de toujours afficher la barre sur iPhone X?
  2. Y at-il un moyen de permettre un clic sur le premier essai?

UPDATE: Après application visuelle de la suggestion de Daniel, il semble y avoir un remplissage. Comme j'ai ajouté:

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

with padding on iPhone X

Néanmoins, le comportement continue et deux clics sont requis.

htmlcsssafarimobile-safariiphone-x
8
Guy

Selon ce site , utilisez env(safe-area-inset-bottom) pour un remplissage supplémentaire:

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

La barre qui apparaît lorsque vous cliquez en premier est un élément natif Safari qui ne peut pas être manipulé par un site Web.

La solution possible consiste à augmenter la taille de vos boutons pour qu'ils soient plus grands, de sorte que vous puissiez cliquer dessus dès le premier essai (le plus souvent) en plus du conseil de Daniel.

0
Agent77326

Comme le suggère Daniel A. White, en utilisant ...

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

est correct, cependant une étape supplémentaire mentionnée dans son lien nécessite que vous utilisiez également 'viewport-fit = cover' pour supporter cela. 

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