Popup du centre CSS à l'écran, fonctionne sur les ordinateurs et les tablettes mais pas sur les téléphones

Question

Essayez d'utiliser CSS pour afficher une fenêtre contextuelle d'aide au centre de l'écran. Sur mon ordinateur et mon iPad, cela fonctionne bien, mais sur l'iPhone, la fenêtre contextuelle est centrée verticalement dans tout l'espace vertical de défilement, ce qui signifie que je dois parfois faire défiler vers le haut ou vers le bas pour la voir. Je veux qu'il soit centré sur l'écran actuellement visible lors de l'appel. (Notez que la hauteur de la page n'est pas statique, c'est-à-dire qu'elle augmente et diminue en fonction de l'activité de l'utilisateur).

Voici le CSS pertinent :

  .helpcontent {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: 200ms ease-in-out;
    border: 1px solid black;
    border-radius: 10px;
    z-index: 10;
    background-color: khaki;
    width: 500px;
    max-width: 80%;
    padding: 10px 15px;
  }

<div class="helpcontent">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>

Answer 1

Vous avez quelques questions.

1. Vous devez définir une hauteur, sinon elle grandira avec le contenu et vous risquez de vous retrouver avec plus de contenu que l'espace vertical disponible. Vous devez utiliser overflow:hidden pour masquer le débordement.

2. Vous ne centrez pas vraiment la fenêtre. Si vous souhaitez faire cela, je vous suggère de changer de focus. Pour qu'un élément occupe toutes les fenêtres disponibles, donnez-lui un display: flex 并使用 align-items 和 justify-content pour le centrer.

Un exemple.

.modal {
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    inset: 0;
}

.modal__content {
    width: 10rem;
    height: 10rem;
    border: 1px solid black;
}

3. Vous disposez déjà d'une étiquette interactive conçue spécifiquement pour cette tâche :
   .