Comment contrôler la taille de l'iframe sur iOS avec CSS ?

Contrôle de la taille de l'iframe iOS avec CSS

Si vous utilisez une iframe avec du contenu qui dépasse sa taille d'image, vous remarquerez peut-être un comportement inattendu sur iOS. Contrairement aux autres navigateurs, Safari sur iOS redimensionne le cadre pour s'adapter au contenu de débordement.

Considérez la structure HTML suivante :

<code class="html"><div class="frame_holder">
  <iframe class="my_frame"></iframe>
</div></code>

Et CSS :

<code class="css">.frame_holder {
  position: absolute;
  left: 50px;
  right: 50px;
  top: 50px;
  bottom: 50px;
  background: #ffffff;
}

.my_frame {
  width: 100%;
  height: 100%;
  border: 1px solid #e0e0e0;
}</code>

On iOS, l'iframe sera redimensionnée pour s'adapter au contenu, en ignorant la hauteur CSS spécifiée. Pour éviter cela, il faut ajouter un div d'emballage avec le CSS suivant :

<code class="css">overflow: auto;
-webkit-overflow-scrolling: touch;</code>

Le HTML et le CSS mis à jour :

<code class="html"><div class="frame_holder">
  <div style="overflow: auto; -webkit-overflow-scrolling: touch;">
    <iframe class="my_frame"></iframe>
  </div>
</div></code>

Cette solution ajoute une couche de contrôle supplémentaire et force le frame pour respecter les dimensions CSS spécifiées, garantissant un comportement cohérent sur tous les navigateurs.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!