Pourquoi mon IFrame réactif ne fonctionne-t-il pas dans iOS Safari ?

Comment rendre un IFrame réactif dans iOS Safari

Lors de l'incorporation de contenu dans un site Web à l'aide d'un IFrame, il est crucial que l'IFrame conserve sa réactivité. Bien qu'il puisse sembler simple de définir la largeur de l'IFrame à 100 % à l'aide de HTML ou de CSS, iOS Safari présente des défis uniques.

IFrame réactif avec défilement externe

Si l'IFrame le contenu est entièrement réactif, sans avoir besoin de barres de défilement internes, iOS Safari redimensionnera automatiquement l'IFrame sans problèmes.

IFrame réactif avec défilement interne

Cependant, des problèmes surviennent lorsque le contenu IFrame contient des zones de défilement horizontal. iOS Safari redimensionne l'IFrame pour garantir que ces zones de défilement sont entièrement visibles, en ignorant les paramètres de débordement.

Solutions

Pour résoudre ce problème, il existe deux solutions :

Modifier l'IFrame Contenu :

1. Définissez la largeur du div défilant dans le contenu de l'IFrame (par exemple, div#ScrolledArea) sur :

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

2. Ce garantit que la largeur du div est plus petite que la largeur de l'IFrame mais lui permet toujours d'occuper 100 % de l'espace disponible space.

Modifier l'élément IFrame :

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

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

2. De plus, désactivez les barres de défilement sur l'IFrame en utilisant l'attribut scrolling="no".

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!