Comment puis-je résoudre les problèmes de réactivité IFrame dans iOS Safari ?

Résoudre les problèmes de réactivité des IFrame dans iOS Safari

L'utilisation des IFrames pour intégrer du contenu externe dans des sites Web pose souvent des défis pour maintenir la réactivité sur les appareils modernes . Ce problème devient particulièrement apparent dans iOS Safari, où les IFrames peuvent ne pas parvenir à adapter entièrement leur taille.

Pour surmonter ce problème, nous devons d'abord comprendre la cause sous-jacente. Lorsqu'un contenu IFrame possède des barres de défilement internes, le navigateur iOS Safari ajuste automatiquement la taille de l'IFrame pour s'adapter à l'intégralité du contenu des barres de défilement. Ce comportement contredit la réactivité souhaitée.

Solutions

Il existe deux approches efficaces pour résoudre ce problème :

1. Modification du contenu de l'IFrame

Si vous contrôlez le contenu de l'IFrame intégré (c'est-à-dire Content.html), vous pouvez modifier le CSS de la zone de défilement (div#ScrolledArea) :

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

Ce CSS définit une largeur minimale, garantissant que l'IFrame ne dépasse jamais la largeur de la fenêtre d'affichage. Les valeurs min-width et *width remplacent le comportement par défaut d'iOS Safari.

2. Modification de l'élément IFrame

Si vous ne pouvez pas accéder au contenu IFrame, vous pouvez manipuler l'élément IFrame lui-même :

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

Cependant, cette méthode nécessite que les barres de défilement soient désactivées sur l'IFrame en utilisant l'attribut scrolling="no" :

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

Bien que la désactivation des barres de défilement soit nécessaire, la modification du contenu de l'IFrame reste la tâche solution préférée pour conserver les barres de défilement dans l'IFrame.

Les deux solutions garantissent que la largeur de l'IFrame est réactive et que la zone de défilement fonctionne comme prévu.

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!