Comment résoudre les problèmes de redimensionnement Iframe sur iOS : une solution CSS ?

Surmonter le problème de redimensionnement d'une iframe sur iOS à l'aide de CSS

Si vous rencontrez le problème d'une iframe dépassant sa taille d'image désignée sur les appareils iOS, malgré fonctionnant correctement sur d'autres navigateurs, ce guide fournira une solution.

En un mot, iOS Safari désobéit aux contraintes conventionnelles de dimensionnement d'iframe définies avec CSS, provoquant le redimensionnement de l'iframe pour l'adapter à son contenu. Pour résoudre ce problème, nous utilisons un div wrapper qui régule le débordement :

<code class="css"><div class="frame_wrapper">
    <iframe class="my_frame">
        // Content
    </iframe>
</div></code>

Les propriétés CSS suivantes sont appliquées au div wrapper :

<code class="css">.frame_wrapper {
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    /* Additional CSS styles... */
}</code>

La propriété overflow contrôle la gestion du débordement contenu, le définir sur auto permet aux barres de défilement d'apparaître selon les besoins. La propriété -webkit-overflow-scrolling est spécifique aux appareils iOS et permet une expérience de défilement élégante.

En encapsulant l'iframe dans ce div wrapper, nous contrôlons le comportement de débordement et demandons à iOS Safari d'obéir aux dimensions iframe souhaitées. . Vous pouvez consulter l'exemple mis à jour ici : http://jsfiddle.net/R3PKB/7/

Cette solution résout un bug de longue date dans la gestion des iframes iOS Safari, comme confirmé dans les discussions précédentes sur Stack Overflow.

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!