Comment résoudre les problèmes de taille Iframe sur les appareils iOS à l’aide de CSS ?

Résolution des problèmes de taille des iframes sur iOS à l'aide de CSS

Un comportement incohérent peut survenir lors de l'affichage des iframes sur les appareils iOS, en particulier lorsque le contenu de l'iframe dépasse sa espace de cadre alloué. Alors que d'autres navigateurs autorisent le défilement par débordement, Safari sur iOS redimensionne de manière inattendue le cadre pour accueillir le contenu excédentaire. Cet écart par rapport au comportement souhaité peut être résolu via des modifications CSS.

Solution :

Pour résoudre ce problème et garantir un comportement iframe cohérent sur tous les appareils, le code CSS suivant peut être ajouté :

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

Voici le HTML et le CSS modifiés :

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

<code class="css">body {
  position: relative;
  background: #f0f0f0;
}

.frame_holder {
  position: absolute;
  top: 50px;
  bottom: 50px;
  left: 50px;
  right: 50px;
  background: #ffffff;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

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

Explication :

Les styles CSS ajoutés introduisent deux propriétés importantes :

• débordement : auto ; permet au conteneur parent de s'adapter au contenu débordant en ajoutant des barres de défilement si nécessaire.
• -webkit-overflow-scrolling: touch; est une propriété spécifique au fournisseur pour les appareils iOS. Il garantit que le mécanisme de défilement tactile est utilisé pour le conteneur parent, permettant un défilement fluide sur iOS.

En incorporant ces modifications CSS, l'iframe conservera ses dimensions spécifiées tout en permettant un défilement de débordement gracieux sur Appareils 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!