Comment résoudre les problèmes de redimensionnement Iframe sur iOS Safari : une solution de contournement pour un affichage cohérent ?

Taille des iframes sur iOS : correction de l'anomalie de redimensionnement de Safari

Dans certains scénarios, les iframes contenant un contenu excessif peuvent s'afficher de manière incorrecte sur les appareils iOS. Contrairement à d'autres navigateurs qui permettent le débordement et le défilement du contenu, Safari sur iOS redimensionne automatiquement l'iframe pour l'adapter à son contenu.

Ce comportement défie l'intention de contrôler la taille de l'iframe via CSS. Pour résoudre ce problème et garantir un dimensionnement iframe cohérent sur toutes les plates-formes, il est nécessaire de mettre en œuvre une solution de contournement.

Solution : confinement des débordements

En ajoutant un élément div supplémentaire avec un CSS spécifique propriétés, vous pouvez forcer l'iframe à conserver ses dimensions prévues et activer le défilement par débordement. Voici le code HTML modifié :

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

Et le CSS correspondant :

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

.wrapper {
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

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

Le div .wrapper introduit overflow: auto;, qui permet le défilement vertical dans le div d'emballage, et - webkit-overflow-scrolling: touch;, une propriété spécifique au webkit qui optimise les performances de défilement sur les appareils iOS.

Avec cette solution de contournement, la taille de l'iframe sera préservée, offrant une expérience utilisateur cohérente et appropriée sur iOS et appareils non iOS.

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!