Comment rendre les IFrames réactifs dans iOS Safari, même avec des barres de défilement internes ?

Rendre les IFrames réactifs dans iOS Safari

Description du problème

L'intégration de contenu dans un site Web à l'aide d'IFrames nécessite que les IFrames soient réactifs. Les solutions CSS de base, comme définir la largeur de l'iframe à 100 %, peuvent ne pas suffire. Cependant, atteindre la réactivité devient particulièrement difficile lorsque le contenu iframe comporte des barres de défilement internes.

IFrames réactifs avec zones de défilement

Pour rendre les IFrames réactifs dans iOS Safari, même lorsque le contenu comprend des zones de défilement, vous avez deux options :

Option 1 : Modifier le contenu

1. Définir le largeur de la zone de défilement (par exemple, div#ScrolledArea) dans le contenu de l'iframe à :

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

2. Cela force iOS Safari à redimensionner correctement l'iframe, permettant à la zone de défilement de fonctionner.

Option 2 : Modifier l'iframe

1. Si vous Si vous n'avez pas accès au contenu de l'iframe, vous pouvez appliquer le CSS suivant à l'iframe lui-même :

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

2. Cependant, vous devez désactiver le défilement dans l'iframe en ajoutant scrolling=" non" à son HTML :

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

Note

Dans l'option 2, désactiver le défilement dans l'iframe vous empêche d'utiliser la zone de défilement dans le contenu de l'iframe. Cependant, si vous modifiez le contenu de l'iframe (option 1), vous pouvez conserver la fonctionnalité de défilement.

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!