Comment rendre les iFrames réactifs dans iOS Safari ?

iFrames réactifs dans iOS Safari

Lors de l'intégration de contenu à l'aide d'iFrames dans iOS Safari, il peut être difficile d'obtenir une réactivité, en particulier lorsque le contenu de l'iFrame inclut zones de défilement horizontal.

Par défaut d'iOS Comportement

Si le contenu de l'iFrame est entièrement réactif et peut ajuster sa taille sans utiliser les barres de défilement internes, iOS Safari redimensionnera l'iFrame en conséquence.

Problème de débordement

Cependant, l'ajout d'un débordement : faire défiler jusqu'au contenu de l'iFrame peut perturber ce comportement. Lorsque cela se produit, iOS Safari redimensionnera automatiquement l'iFrame pour rendre visible le contenu débordant.

Solutions

• Modifier le contenu de l'iFrame : Définissez la largeur du div débordant (par exemple, #ScrolledArea) à :

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

  Cela force iOS Safari à respecter la valeur de largeur minimale, garantissant que la largeur du div correspond à la largeur de l'iFrame.

• Modifier l'iFrame : Si vous n'avez pas accès au contenu de l'iFrame, appliquez le même CSS à l'iFrame lui-même :

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

  Pour que cela fonctionne, vous devez désactiver les barres de défilement en utilisant scrolling="no" sur l'iFrame.

En implémentant une de ces solutions, vous pouvez obtenir des iFrames réactifs dans iOS Safari, même lorsque leur contenu implique un défilement horizontal.

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!