Comment puis-je faire fonctionner correctement les IFrames réactifs dans iOS Safari ?

IFrames réactifs dans iOS Safari

Dans le Web moderne, les IFrames réactifs sont essentiels pour une intégration transparente du contenu dans les sites Web. Alors qu'en théorie, définir la largeur de l'IFrame à 100 % devrait suffire, en pratique, cette approche peut rencontrer des problèmes dans iOS Safari.

Défis

Lorsque le contenu d'un IFrame a barres de défilement internes, iOS Safari redimensionne automatiquement l'IFrame pour afficher entièrement la zone de défilement, même si la largeur de l'IFrame est définie sur 100 %. Ce comportement peut conduire à masquer le contenu débordé.

Solution

Pour remédier à ce problème et assurer la réactivité IFrame dans iOS Safari, il existe deux options :

Option 1 : Modifier le contenu IFrame

Si vous contrôlez le contenu dans le IFrame, modifiez le CSS du div avec débordement : faites défiler jusqu'à ce qui suit :

width: 1px;
min-width: 100%;
*width: 100%;

Cette technique remplace le comportement par défaut d'iOS Safari et force la largeur du div à 100%, permettant de masquer le débordement.

Option 2 : Modifier l'IFrame lui-même

Si la modification du contenu de l'IFrame est Ce n'est pas faisable, vous pouvez appliquer le même CSS à l'IFrame lui-même :

iframe {
    width: 1px;
    min-width: 100%;
    *width: 100%;
}

Cependant, cette option nécessite de désactiver les barres de défilement sur l'IFrame en utilisant scrolling="no":

<iframe height="950" width="100%" scrolling="no" src="Content.html"></iframe>

Conclusion

En suivant l'une ou l'autre des solutions proposées, vous pouvez vous assurer que les IFrames restent réactifs dans iOS Safari tout en s'adaptant zones à défilement horizontal dans leur contenu.

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!